web-dev-qa-db-fra.com

jQuery - place tous les divs dans une div avec la classe ".container"

Scénario:

J'ai un menu contenant des liens:

Main Menu Item
--------------
Sub: Show Grid > SubSub: <a>Show #first</a>
                         <a>Show #second</a>
                         <a>Show #third</a>

Maintenant, j'ai besoin de trouver tous les divs avec un #ID CSS qui sont des éléments DOM de premier niveau à l'intérieur du .container div. Ces éléments doivent être ajoutés à "Sub: Show Grid" et ajouter une classe en cliquant dessus. 

<!-- The mark up -->
<div class="container">
    <div id="first">1st</div>
    <div id="second">2nd</div>
    <div id="third">3rd</div>
</div>

Question:  

  • Comment trouver le div de premier niveau avec un #ID (non défini/inconnu) avec jQuery?
  • Comment puis-je interagir avec le résultat en php - vais-je obtenir un tableau en tant que résultat pour construire le menu SubSub à partir de celui-ci?

Merci d'avance!

Éditer # 1

Pour clarifier ce que j'essaie de faire - En pseudo-code:

$divs_received_from_jquery_fn = 'how do I get the divs (IDs?) as array(?) and interact with them in the following code?';
foreach ( $divs_received_from_jquery_fn as $div )
{
    add_menu_item( array( 
         'parent' => 'Sub: Show Grid'
        ,'name'   => 'Show #'.$div
        ,'href'   => ''
        ,'meta'   => array( 
                        'onclick' => 'jQuery(".container #".$div).toggleClass("showgrid");'
         ) 
    ) );
}

Modifier # 2

Le "monde réel" exemple. La sortie est un événement onclick pour un a-link. Mon problème est que je veux appeler la fonction foreach pour chaque div[id] sous le div .container et que je ne sais tout simplement pas comment interagir correctement avec javascript et php.

?>
<script type="text/javascript">
    jQuery(".container > div[id]").each(function(){
        var context = $(this);
        <?php 
        // SHOWGRID - parts
        // @since v0.3
        $wp_admin_bar->add_menu( // trigger the function via the global $wp_admin_bar var that calls the class
            array(
                 'parent'   => 'showgrid' // parent menu item
                ,'id'       => 'showgrid - ' + this.id // menu item ID
                ,'title'    => sprintf( // menu item label
                     __( '%1$s show grid parts %2$s%3$s', OXO_TEXTDOMAIN )
                    ,'<span style="background: none;">'
                    ,'<span class="showgridparts-on hide">&#x2714;</span>'
                    ,'<span class="showgridparts-off">&times;</span>' 
                 )
                ,'href'     => '' // stays empty to not trigger anything
                ,'meta'     => array( // HERE GOES THE ACTUAL jQuery FUNCTION
                    'onclick'   => 'jQuery("#" + this.id).toggleClass("showgrid"); jQuery(".showgridparts-on").toggleClass("hide"); jQuery(".showgridparts-off").toggleClass("hide"); return false;'
                 )
            ) 
        );
        ?>
    });
</script>
<?php
jquerydom
23
kaiser

Identité connue

$(".container > #first");

ou

$(".container").children("#first");

ou puisque les identifiants doivent être uniques dans un seul document:

$("#first");

Le dernier est bien sûr le plus rapide.

Identifiant inconnu

Puisque vous dites que vous ne connaissez pas leur ID, les deux premiers sélecteurs supérieurs (où #first est écrit) peuvent être modifiés en:

$(".container > div");
$(".container").children("div");

Le dernier (parmi les trois premiers sélecteurs) qui utilise uniquement l’ID n’est bien entendu pas modifiable de cette façon.

Si vous devez également filtrer uniquement les éléments enfants DIV qui définissent l'attribut ID, écrivez les sélecteurs de la manière suivante:

$(".container > div[id]");
$(".container").children("div[id]");

Joindre un gestionnaire de clics

Ajoutez le code suivant pour attacher le gestionnaire de clics à l’un de vos sélecteurs préférés:

// use selector of your choice and call 'click' on it
$(".container > div").click(function(){
    // if you need element's ID
    var divID = this.id;
    cache your element if you intend to use it multiple times
    var clickedDiv = $(this);
    // add CSS class to it
    clickedDiv.addClass("add-some-class");
    // do other stuff that needs to be done
});

Spécification des sélecteurs CSS3

Je voudrais également vous indiquer Spécification de sélecteur CSS3 utilisée par jQuery. Cela vous aidera beaucoup à l'avenir car il se peut que certains sélecteurs ne soient pas du tout au courant et pourraient vous rendre la vie beaucoup plus facile.

Après votre question modifiée

Je ne suis pas tout à fait sûr de savoir ce que vous recherchez, même si vous avez écrit un pseudo-code ... En tout cas. Certaines parties peuvent encore être répondues:

$(".container > div[id]").each(function(){
    var context = $(this);
    // get menu parent element: Sub: Show Grid
    // maybe I'm not appending to the correct element here but you should know
    context.appendTo(context.parent().parent());
    context.text("Show #" + this.id);
    context.attr("href", "");
    context.click(function(evt){
        evt.preventDefault();
        $(this).toggleClass("showgrid");
    })
});

les derniers usages context pourraient être combinés en un seul enchaîné:

context.text(...).attr(...).click(...);

Concernant les éléments DOM

Vous pouvez toujours obtenir l'élément DOM sous-jacent à partir du jeu de résultats jQuery.

$(...).get(0)
// or
$(...)[0]

vous obtiendrez le premier élément DOM de l'ensemble de résultats jQuery. Le résultat de jQuery est toujours un ensemble d'éléments même s'il n'y en a aucun ou qu'un seul.

Mais lorsque j'ai utilisé la fonction .each() et fourni une fonction anonyme qui sera appelée sur chaque élément de l'ensemble, le mot clé this fait en réalité référence à l'élément DOM.

$(...).each(function(){
    var DOMelement = this;
    var jQueryElement = $(this);
    ...
});

J'espère que cela efface certaines choses pour votre.

64
Robert Koritnik

Pour obtenir tous les divs sous 'conteneur', utilisez ce qui suit:

$(".container>div")  //or
$(".container").children("div");

Vous pouvez stipuler un #id spécifique au lieu de div pour en obtenir un. 

Vous dites que vous voulez une div avec un identifiant 'non défini'. Si je vous ai bien compris, voici ce que vous obtiendrez:

$(".container>div[id=]")
2
James Wiseman

Pour définir la classe lorsque vous cliquez sur un div immédiatement dans l'élément .container, vous pouvez utiliser:

<script>
$('.container>div').click(function () {
        $(this).addClass('whatever')
    });
</script>
1
Digbyswift

De http://api.jquery.com/jQuery/

Contexte du sélecteur Par défaut, les sélecteurs effectuent leurs recherches dans le DOM à partir de la racine du document. Cependant, un autre contexte peut être défini pour la recherche en utilisant le second paramètre facultatif de la fonction $ (). Par exemple, pour effectuer une recherche dans un gestionnaire d'événements, vous pouvez limiter la recherche de la manière suivante:

$( "div.foo" ).click(function() { 
   $( "span", this ).addClass( "bar" );
});

Lorsque la recherche du sélecteur de plage est restreinte à son contexte, seules les plages de l'élément cliqué obtiendront la classe supplémentaire.

Donc, pour votre exemple, je suggérerais quelque chose comme:

$("div", ".container").each(function(){
     //do whatever
 });
0
user1161391