jQuery
DOM Traversing

Wybierz elementy potomne elementu

Aby wybrać elementy potomne elementu, możesz użyć metody children() .

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

Zmień kolor wszystkich elementów .parent elementu .parent :

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

Metoda akceptuje opcjonalny argument selector którego można użyć do filtrowania zwracanych elementów.

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

Iterowanie po liście elementów jQuery

Gdy potrzebujesz iteracji po liście elementów jQuery.

Rozważ tę strukturę DOM:

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

Aby wydrukować tekst obecny we wszystkich elementach div z klasą red :

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

Wskazówka: key jest indeksem elementu div.red , nad którym obecnie div.red , w obrębie jego elementu nadrzędnego. ele jest elementem HTML, więc możemy stworzyć z niego obiekt jQuery za pomocą $() lub jQuery() , na przykład: $(ele) . Następnie możemy wywołać dowolną metodę jQuery na obiekcie, taką jak css() lub hide() itp. W tym przykładzie po prostu wyciągamy tekst obiektu.

Wybór rodzeństwa

Aby wybrać rodzeństwo elementu, możesz użyć metody .siblings() .

Typowym przykładem, w którym chcesz zmodyfikować rodzeństwo elementu, jest menu:

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

Gdy użytkownik kliknie element menu, selected klasę należy dodać do klikniętego elementu i usunąć z jego rodzeństwa :

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

Metoda przyjmuje opcjonalny argument selector , którego można użyć, jeśli chcesz zawęzić rodzaje rodzeństwa, które chcesz wybrać:

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

metoda closest ()

Zwraca pierwszy element, który pasuje do selektora, rozpoczynając od elementu i przechodząc w górę drzewa DOM.

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

WYNIK

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

metoda first (): Pierwsza metoda zwraca pierwszy element z dopasowanego zestawu elementów.

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

Wynik:

First paragraph: This is first paragraph in a div.

Zdobądź następny element

Aby uzyskać następny element, możesz użyć metody .next() .

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

Jeśli stoisz na elemencie „Anna” i chcesz uzyskać następny element, „Paul”, metoda .next() pozwoli ci to zrobić.

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

Metoda przyjmuje opcjonalny argument selector , którego można użyć, jeśli następny element musi być określonym rodzajem elementu.

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

Jeśli następny element nie należy do selector typu selector wówczas zwracany jest pusty zestaw, a modyfikacje nic nie zrobią.

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

Uzyskaj poprzedni element

Aby uzyskać poprzedni element, możesz użyć metody .prev() .

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

Jeśli stoisz na elemencie „Anna” i chcesz uzyskać poprzedni element, „Mark”, metoda .prev() pozwoli ci to zrobić.

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

Metoda przyjmuje opcjonalny argument selector , którego można użyć, jeśli poprzedni element musi być określonym rodzajem elementu.

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

Jeśli poprzedni element nie należy do selector typu selector wówczas zwracany jest pusty zestaw, a modyfikacje nic nie zrobią.

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

Filtruj zaznaczenie

Aby przefiltrować zaznaczenie, możesz użyć metody .filter() .

Metoda jest wywoływana dla wyboru i zwraca nowy wybór. Jeśli filtr pasuje do elementu, jest on dodawany do zwracanego wyboru, w przeciwnym razie jest ignorowany. Jeśli żaden element nie jest dopasowany, zwracany jest pusty wybór.

HTML

Będziemy używać HTML.

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

Selektor

Filtrowanie za pomocą selektorów jest jednym z prostszych sposobów filtrowania zaznaczenia.

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

Funkcjonować

Filtrowanie zaznaczenia za pomocą funkcji jest przydatne, jeśli nie można użyć selektorów.

Funkcja jest wywoływana dla każdego elementu w zaznaczeniu. Jeśli zwróci true wartość, element zostanie dodany do zwróconego wyboru.

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

Elementy

Możesz filtrować według elementów DOM. Jeśli elementy DOM są w zaznaczeniu, zostaną one uwzględnione w zwróconym zaznaczeniu.

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

Wybór

Możesz także filtrować zaznaczenie według innego zaznaczenia. Jeśli element znajduje się w obu zaznaczeniach, zostanie uwzględniony w zwróconym zaznaczeniu.

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

metoda find ()

Metoda .find () pozwala nam przeszukiwać potomków tych elementów w drzewie DOM i konstruować nowy obiekt jQuery z pasujących elementów.

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

Wynik

• A1
• A2
• A3

• B1
• B2
• B3