jQuery
DOM Traversing

Wählen Sie die untergeordneten Elemente des Elements aus

Um die untergeordneten Elemente eines Elements auszuwählen, können Sie die children() -Methode verwenden.

<div class="parent">
    <h2>A headline</h2>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Praesent quis dolor turpis...</p>
</div>

Ändern Sie die Farbe aller .parent Elemente des Elements .parent :

$('.parent').children().css("color", "green");

Die Methode akzeptiert ein optionales selector Argument, mit dem die zurückgegebenen Elemente gefiltert werden können.

// Only get "p" children
$('.parent').children("p").css("color", "green");

Iteration über eine Liste von jQuery-Elementen

Wenn Sie die Liste der jQuery-Elemente durchlaufen müssen.

Betrachten Sie diese DOM-Struktur:

<div class="container">
    <div class="red one">RED 1 Info</div>
    <div class="red two">RED 2 Info</div>
    <div class="red three">RED 3 Info</div>
</div>

So drucken Sie den in allen div Elementen vorhandenen Text mit einer red Klasse:

$(".red").each(function(key, ele){
    var text = $(ele).text();
    console.log(text);
});

Tipp: Der key ist der Index des div.red -Elements, das wir gerade innerhalb seines übergeordneten Elements div.red . ele ist das HTML-Element, so dass wir daraus ein jQuery-Objekt mit $() oder jQuery() erstellen können: $(ele) . Danach können wir jede jQuery-Methode für das Objekt aufrufen, wie css() oder hide() usw. In diesem Beispiel ziehen wir nur den Text des Objekts.

Geschwister auswählen

Zum Auswählen von Geschwistern eines Elements können Sie die .siblings() -Methode verwenden.

Ein typisches Beispiel, in dem Sie die Geschwister eines Elements ändern möchten, befindet sich in einem Menü:

<ul class="menu">
    <li class="selected">Home</li>
    <li>Blog</li>
    <li>About</li>
</ul>

Wenn der Benutzer auf einem Menüpunkt klickt die selected sollte Klasse angeklickten Element hinzugefügt werden und von seinen Geschwistern entfernt:

$(".menu").on("click", "li", function () {
    $(this).addClass("selected");
    $(this).siblings().removeClass("selected");
});

Die Methode verwendet ein optionales selector , das verwendet werden kann, wenn Sie die Arten von Geschwistern einschränken möchten, die Sie auswählen möchten:

$(this).siblings("li").removeClass("selected");

nächste () Methode

Gibt das erste Element zurück, das mit dem Selektor übereinstimmt, beginnend am Element und durch den DOM-Baum.

HTML

<div id="abc" class="row">
    <div id="xyz" class="row">
    </div>
    <p id="origin">
      Hello
    </p>
</div>

jQuery

var target = $('#origin').closest('.row');
console.log("Closest row:", target.attr('id') );

var target2 = $('#origin').closest('p');
console.log("Closest p:", target2.attr('id') );

AUSGABE

"Closest row: abc"
"Closest p: origin"

first () -Methode: Die erste Methode gibt das erste Element aus der übereinstimmenden Elementmenge zurück.

HTML

<div class='.firstExample'>
   <p>This is first paragraph in a div.</p>
   <p>This is second paragraph in a div.</p>
   <p>This is third paragraph in a div.</p>
   <p>This is fourth paragraph in a div.</p>
   <p>This is fifth paragraph in a div.</p>
</div>

JQuery

var firstParagraph = $("div p").first();
console.log("First paragraph:", firstParagraph.text());

Ausgabe:

First paragraph: This is first paragraph in a div.

Holen Sie sich das nächste Element

Um das nächste Element zu erhalten, können Sie die .next() -Methode verwenden.

<ul>
    <li>Mark</li>
    <li class="anna">Anna</li>
    <li>Paul</li>
</ul>

Wenn Sie auf dem Element "Anna" stehen und das nächste Element "Paul" erhalten .next() , können Sie dies mit der .next() -Methode tun.

// "Paul" now has green text
$(".anna").next().css("color", "green");

Die Methode verwendet ein optionales selector , das verwendet werden kann, wenn das nächste Element eine bestimmte Art von Element sein muss.

// Next element is a "li", "Paul" now has green text
$(".anna").next("li").css("color", "green");

Wenn das nächste Element nicht vom selector ist, wird eine leere Menge zurückgegeben, und die Änderungen führen zu nichts.

// Next element is not a ".mark", nothing will be done in this case
$(".anna").next(".mark").css("color", "green");

Vorheriges Element abrufen

Um das vorherige Element zu erhalten, können Sie die .prev() -Methode verwenden.

<ul>
    <li>Mark</li>
    <li class="anna">Anna</li>
    <li>Paul</li>
</ul>

Wenn Sie auf dem Element "Anna" stehen und das vorherige Element "Mark" erhalten .prev() , können Sie dies mit der Methode .prev() tun.

// "Mark" now has green text
$(".anna").prev().css("color", "green");

Die Methode verwendet ein optionales selector , das verwendet werden kann, wenn das vorherige Element eine bestimmte Art von Element sein muss.

// Previous element is a "li", "Mark" now has green text
$(".anna").prev("li").css("color", "green");

Wenn das vorherige Element nicht vom selector ist, wird eine leere Menge zurückgegeben, und die Änderungen führen zu nichts.

// Previous element is not a ".paul", nothing will be done in this case
$(".anna").prev(".paul").css("color", "green");

Auswahl filtern

Um eine Auswahl zu filtern, können Sie die .filter() -Methode verwenden.

Die Methode wird bei einer Auswahl aufgerufen und gibt eine neue Auswahl zurück. Wenn der Filter mit einem Element übereinstimmt, wird es der zurückgegebenen Auswahl hinzugefügt. Andernfalls wird es ignoriert. Wenn kein Element übereinstimmt, wird eine leere Auswahl zurückgegeben.

Das HTML

Dies ist der HTML-Code, den wir verwenden werden.

<ul>
    <li class="zero">Zero</li>
    <li class="one">One</li>
    <li class="two">Two</li>
    <li class="three">Three</li>
</ul>

Wähler

Das Filtern mit Selektoren ist eine der einfacheren Möglichkeiten, eine Auswahl zu filtern.

$("li").filter(":even").css("color", "green"); // Color even elements green
$("li").filter(".one").css("font-weight", "bold"); // Make ".one" bold

Funktion

Das Filtern einer Auswahl mithilfe einer Funktion ist hilfreich, wenn die Verwendung von Selektoren nicht möglich ist.

Die Funktion wird für jedes Element in der Auswahl aufgerufen. Wenn ein true Wert zurückgegeben wird, wird das Element der zurückgegebenen Auswahl hinzugefügt.

var selection = $("li").filter(function (index, element) {
    // "index" is the position of the element
    // "element" is the same as "this"
    return $(this).hasClass("two");
});
selection.css("color", "green"); // ".two" will be colored green

Elemente

Sie können nach DOM-Elementen filtern. Wenn sich die DOM-Elemente in der Auswahl befinden, werden sie in die zurückgegebene Auswahl aufgenommen.

var three = document.getElementsByClassName("three");
$("li").filter(three).css("color", "green");

Auswahl

Sie können eine Auswahl auch nach einer anderen Auswahl filtern. Wenn sich ein Element in beiden Auswahlen befindet, wird es in die zurückgegebene Auswahl aufgenommen.

var elems = $(".one, .three");
$("li").filter(elems).css("color", "green");

find () -Methode

Mit der .find () -Methode können wir die Nachkommen dieser Elemente in der DOM-Struktur durchsuchen und aus den übereinstimmenden Elementen ein neues jQuery-Objekt erstellen.

HTML

     <div class="parent">
        <div class="children" name="first">
            <ul>
                <li>A1</li>
                <li>A2</li>
                <li>A3</li>
            </ul>
        </div>
        <div class="children" name="second">
            <ul>
                <li>B1</li>
                <li>B2</li>
                <li>B3</li>
            </ul>
        </div>
       </div>

jQuery

 $('.parent').find('.children[name="second"] ul li').css('font-weight','bold');

Ausgabe

• A1
• A2
• A3

• B1
• B2
• B3