it-swarm.com.de

jQuery - holt alle Divs in einem Div mit der Klasse ".container"

Szenario:

Ich habe ein Menü mit Links:

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

Jetzt muss ich alle divs mit einem css #ID finden, die DOM-Elemente der ersten Ebene im .container div sind. Diese Elemente sollten an "Sub: Show Grid" angehängt werden und mit einem Klick eine Klasse hinzufügen. 

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

Frage:  

  • Wie würde ich das erste Level div mit einem (undefined/nicht bekannten) #ID mit jQuery finden?
  • Wie kann ich mit dem Ergebnis in PHP interagieren? Bekomme ich ein Array als Ergebnis, um das SubSub-Menü daraus zu erstellen?

Danke im Voraus!


Bearbeiten Sie # 1

Um klarer zu machen, was ich versuche - In 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");'
         ) 
    ) );
}

Bearbeiten Sie # 2

Das "reale Welt" Beispiel. Die Ausgabe ist ein Onclick-Ereignis für einen a-Link. Mein Problem ist, dass ich die Funktion foreach für jeden div[id] unter dem .containerdiv aufrufen möchte und einfach nicht wissen kann, wie man richtig mit Javascript & PHP interagiert.

?>
<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
23
kaiser

Bekannte ID

$(".container > #first");

oder

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

oder da IDs in einem einzelnen Dokument eindeutig sein sollten:

$("#first");

Der letzte ist natürlich der Schnellste.

Unbekannte ID

Da Sie damit sagen, dass Sie das ID-Paar der oberen Selektoren (in dem #first geschrieben ist) nicht kennen, können Sie Folgendes ändern:

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

Der letzte (von den ersten drei Selektoren), der nur die ID verwendet, kann auf diese Weise natürlich nicht geändert werden.

Wenn Sie auch nur die untergeordneten DIV-Elemente filtern müssen, die das ID-Attribut definieren, schreiben Sie die Selektoren folgendermaßen:

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

Click-Handler anhängen

Fügen Sie den folgenden Code hinzu, um den Click-Handler an einen Ihrer bevorzugten Selektoren anzuhängen:

// 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
});

CSS3 Selectors-Spezifikation

Ich möchte Sie auch auf die CSS3-Auswahlspezifikation die von jQuery verwendet wird, hinweisen. Es wird Ihnen in Zukunft viel helfen, weil es einige Selektoren gibt, die Sie überhaupt nicht kennen und die Ihr Leben erheblich erleichtern könnten.

Nach deiner bearbeiteten Frage

Ich bin mir nicht ganz sicher, ob ich weiß, wonach Sie streben, auch wenn Sie einen Pseudo-Code geschrieben haben ... Wie auch immer. Einige Teile können noch beantwortet werden:

$(".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");
    })
});

die letzten context-Verwendungen könnten zu einer einzigen verketteten Anwendung kombiniert werden:

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

Zu DOM-Elementen

Sie können das darunter liegende DOM-Element immer aus der jQuery-Ergebnismenge abrufen.

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

erhalten Sie das erste DOM-Element aus der jQuery-Ergebnismenge. Das Ergebnis von jQuery ist immer eine Menge von Elementen, auch wenn sich darin keine oder nur eine befindet.

Wenn ich jedoch die Funktion .each() verwendet und eine anonyme Funktion bereitgestellt hat, die für jedes Element in der Gruppe aufgerufen wird, bezieht sich das this-Schlüsselwort tatsächlich auf das DOM-Element.

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

Ich hoffe, das klärt einige Dinge für dich.

64
Robert Koritnik

Um alle Divs unter 'Container' zu erhalten, verwenden Sie Folgendes:

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

Sie können einen bestimmten #id anstelle von div angeben, um einen bestimmten zu erhalten. 

Sie sagen, Sie wollen ein Div mit einer "undefinierten" ID. Wenn ich Sie richtig verstehe, würde dies Folgendes erreichen:

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

Um die Klasse beim Klicken auf ein div unmittelbar innerhalb des .container-Elements festzulegen, können Sie Folgendes verwenden:

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

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

Auswahlkontext Standardmäßig führen Selektoren ihre Suche innerhalb des DOM ab dem Dokumentstamm aus. Es kann jedoch ein alternativer Kontext für die Suche angegeben werden, indem der optionale zweite Parameter der Funktion $ () verwendet wird. Um beispielsweise eine Suche in einem Event-Handler durchzuführen, kann die Suche wie folgt eingeschränkt werden:

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

Wenn die Suche nach der Bereichsauswahl auf diesen Kontext beschränkt ist, werden nur Bereiche innerhalb des angeklickten Elements die zusätzliche Klasse erhalten.

Für Ihr Beispiel würde ich also Folgendes vorschlagen:

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