jQuery
DOM doorkruisen

Selecteer kinderen van element

Om de onderliggende elementen van een element te selecteren, kunt u de methode children() gebruiken.

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

Wijzig de kleur van alle kinderen van het .parent element:

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

De methode accepteert een optioneel selector dat kan worden gebruikt om de geretourneerde elementen te filteren.

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

Herhaling van de lijst met jQuery-elementen

Wanneer u de lijst met jQuery-elementen moet herhalen.

Overweeg deze DOM-structuur:

<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>

Om de tekst in alle div elementen met een klasse red af te drukken:

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

Tip: key is de index van het div.red element waar we op dit moment overheen gaan, binnen het bovenliggende element. ele is het HTML-element, dus we kunnen er een jQuery-object van maken met $() of jQuery() , zoals: $(ele) . Hierna kunnen we elke jQuery-methode op het object aanroepen, zoals css() of hide() enz. In dit voorbeeld trekken we gewoon de tekst van het object.

Broers en zussen selecteren

Om broers en zussen van een item te selecteren, kunt u de methode .siblings() gebruiken.

Een typisch voorbeeld waarin u de broers en zussen van een item wilt wijzigen, bevindt zich in een menu:

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

Wanneer de gebruiker op een menu-item klikt, moet de selected klasse aan het geklikte element worden toegevoegd en uit de broers en zussen worden verwijderd :

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

De methode heeft een optioneel selector , dat kan worden gebruikt als u de soorten broers en zussen die u wilt selecteren, wilt beperken:

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

dichtstbijzijnde () methode

Retourneert het eerste element dat overeenkomt met de selector, beginnend bij het element en oplopend naar de DOM-structuur.

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') );

OUTPUT

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

first () -methode: de eerste methode retourneert het eerste element uit de overeenkomende set elementen.

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());

Output:

First paragraph: This is first paragraph in a div.

Krijg het volgende element

Om het volgende element te krijgen, kunt u de methode .next() gebruiken.

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

Als u op het "Anna" -element staat en u wilt het volgende element, "Paul", .next() , dan kunt u met de .next() -methode dat doen.

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

De methode heeft een optioneel selector , dat kan worden gebruikt als het volgende element een bepaald soort element moet zijn.

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

Als het volgende element niet van het type selector wordt een lege set geretourneerd en doen de wijzigingen niets.

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

Krijg vorig element

Om het vorige element te krijgen, kunt u de methode .prev() gebruiken.

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

Als u op het "Anna" -element staat en u wilt het vorige element, "Mark", krijgen, kunt u met de .prev() -methode dat doen.

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

De methode heeft een optioneel selector , dat kan worden gebruikt als het vorige element een bepaald soort element moet zijn.

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

Als het vorige element niet van het type selector wordt een lege set geretourneerd en doen de wijzigingen niets.

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

Filter een selectie

Om een selectie te filteren, kunt u de methode .filter() gebruiken.

De methode wordt een selectie aangeroepen en retourneert een nieuwe selectie. Als het filter overeenkomt met een element, wordt het toegevoegd aan de geretourneerde selectie, anders wordt het genegeerd. Als er geen element is gevonden, wordt een lege selectie geretourneerd.

De HTML

Dit is de HTML die we zullen gebruiken.

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

keuzeschakelaar

Filteren met behulp van selectors is een van de eenvoudigere manieren om een selectie te filteren.

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

Functie

Een selectie filteren met behulp van een functie is handig als het niet mogelijk is om selectors te gebruiken.

De functie wordt opgeroepen voor elk element in de selectie. Als het een true waarde retourneert, wordt het element toegevoegd aan de geretourneerde selectie.

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

Elements

U kunt filteren op DOM-elementen. Als de DOM-elementen in de selectie voorkomen, worden deze opgenomen in de geretourneerde selectie.

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

Selectie

U kunt een selectie ook filteren op een andere selectie. Als een element zich in beide selecties bevindt, wordt het opgenomen in de geretourneerde selectie.

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

find () methode

.find () methode stelt ons in staat om de afstammelingen van deze elementen in de DOM-structuur te doorzoeken en een nieuw jQuery-object te construeren uit de overeenkomende elementen.

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');

uitgang

• A1
• A2
• A3

• B1
• B2
• B3