jQuery
DOM Traversing

Välj barn av element

För att välja barn till ett element kan du använda metoden children() .

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

Ändra färgen på alla barn i det .parent :

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

Metoden accepterar ett valfritt selector som kan användas för att filtrera de element som returneras.

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

Iterating över lista över jQuery-element

När du måste iterera över listan över jQuery-element.

Tänk på denna 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>

Så här skriver du ut texten som finns i alla div element med en klass av red :

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

Tips: key är indexet för det div.red elementet som vi för närvarande itererar över, inom dess överordnade. ele är HTML-elementet, så vi kan skapa ett jQuery-objekt från det med $() eller jQuery() , så: $(ele) . Efteråt kan vi ringa vilken jQuery-metod som helst på objektet, som css() eller hide() etc. I det här exemplet drar vi bara textens objekt.

Välja syskon

För att välja syskon till ett objekt kan du använda .siblings() .

Ett typiskt exempel där du vill ändra syskon till ett objekt finns i en meny:

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

När användaren klickar på ett menyalternativ bör den selected klassen läggas till i det klickade elementet och tas bort från sina syskon :

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

Metoden tar ett valfritt selector som kan användas om du behöver begränsa vilka syskonstyper du vill välja:

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

närmaste () -metod

Returnerar det första elementet som matchar väljaren som börjar vid elementet och korsar upp DOM-trädet.

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

PRODUKTION

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

first () -metod: Den första metoden returnerar det första elementet från den matchade uppsättningen av element.

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

Produktion:

First paragraph: This is first paragraph in a div.

Skaffa nästa element

För att få nästa element kan du använda .next() .

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

Om du står på "Anna" -elementet och du vill få nästa element, "Paul", .next() metoden .next() att göra det.

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

Metoden tar ett valfritt selector som kan användas om nästa element måste vara en viss typ av element.

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

Om nästa element inte är av typväljaren selector en tom uppsättning och ändringarna gör ingenting.

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

Hämta föregående element

För att få det föregående elementet kan du använda .prev() .

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

Om du står på "Anna" -elementet och vill hämta det föregående elementet, "Markera", .prev() metoden .prev() göra det.

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

Metoden tar ett valfritt selector som kan användas om det föregående elementet måste vara en viss typ av element.

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

Om det föregående elementet inte är av typväljaren selector en tom uppsättning och ändringarna kommer inte att göra någonting.

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

Filtrera ett urval

För att filtrera ett urval kan du använda .filter() .

Metoden kallas på ett urval och returnerar ett nytt urval. Om filtret matchar ett element läggs det till det returnerade valet, annars ignoreras det. Om inget element matchas returneras ett tomt val.

HTML

Det här är den HTML vi kommer att använda.

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

Väljare

Filtrering med väljare är ett av de enklare sätten att filtrera ett urval.

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

Fungera

Det är användbart att filtrera ett urval med en funktion om det inte går att använda väljare.

Funktionen kallas för varje element i valet. Om det returnerar ett true värde läggs elementet till det returnerade valet.

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

element

Du kan filtrera efter DOM-element. Om DOM-elementen finns i urvalet kommer de att inkluderas i det returnerade valet.

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

Urval

Du kan också filtrera ett urval med ett annat val. Om ett element finns i båda valen kommer det att inkluderas i det returnerade valet.

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

hitta () -metoden

.find () -metoden tillåter oss att söka igenom ättlingarna till dessa element i DOM-trädet och konstruera ett nytt jQuery-objekt från de matchande 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');

Produktion

• A1
• A2
• A3

• B1
• B2
• B3