jQuery
DOM Traversing

Seleziona i figli dell'elemento

Per selezionare i figli di un elemento puoi usare il metodo children() .

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

Cambia il colore di tutti i bambini dell'elemento .parent :

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

Il metodo accetta un argomento selector facoltativo che può essere utilizzato per filtrare gli elementi restituiti.

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

Iterazione dell'elenco di elementi jQuery

Quando è necessario scorrere l'elenco degli elementi jQuery.

Considera questa struttura 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>

Per stampare il testo presente in tutti gli elementi div con una classe di red :

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

Suggerimento: key è l'indice dell'elemento div.red cui stiamo attualmente div.red iterazione, all'interno del suo genitore. ele è l'elemento HTML, quindi possiamo creare un oggetto jQuery da esso usando $() o jQuery() , ad esempio: $(ele) . Dopo, possiamo chiamare qualsiasi metodo jQuery sull'oggetto, come css() o hide() ecc. In questo esempio, tiriamo semplicemente il testo dell'oggetto.

Selezionare i fratelli

Per selezionare i fratelli di un oggetto puoi usare il metodo .siblings() .

Un esempio tipico in cui si desidera modificare i fratelli di un elemento si trova in un menu:

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

Quando l'utente fa clic su una voce di menu, la classe selected deve essere aggiunta all'elemento selezionato e rimossa dai suoi fratelli :

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

Il metodo accetta un argomento selector opzionale, che può essere utilizzato se è necessario limitare i tipi di fratelli che si desidera selezionare:

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

metodo più vicino ()

Restituisce il primo elemento che corrisponde al selettore che inizia con l'elemento e che attraversa l'albero 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') );

PRODUZIONE

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

metodo first (): il primo metodo restituisce il primo elemento dall'insieme di elementi corrispondenti.

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

Produzione:

First paragraph: This is first paragraph in a div.

Ottieni il prossimo elemento

Per ottenere l'elemento successivo è possibile utilizzare il metodo .next() .

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

Se ti trovi sull'elemento "Anna" e vuoi ottenere l'elemento successivo, "Paul", il metodo .next() ti permetterà di farlo.

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

Il metodo accetta un argomento selector opzionale, che può essere utilizzato se l'elemento successivo deve essere un certo tipo di elemento.

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

Se l'elemento successivo non è del selector tipi, viene restituito un set vuoto e le modifiche non faranno nulla.

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

Ottieni elementi precedenti

Per ottenere l'elemento precedente puoi usare il metodo .prev() .

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

Se ti trovi sull'elemento "Anna" e vuoi ottenere l'elemento precedente, "Mark", il metodo .prev() ti permetterà di farlo.

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

Il metodo accetta un argomento selector opzionale, che può essere utilizzato se l'elemento precedente deve essere un certo tipo di elemento.

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

Se l'elemento precedente non è del selector tipi, viene restituito un set vuoto e le modifiche non faranno nulla.

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

Filtra una selezione

Per filtrare una selezione puoi usare il metodo .filter() .

Il metodo viene chiamato su una selezione e restituisce una nuova selezione. Se il filtro corrisponde a un elemento, viene aggiunto alla selezione restituita, altrimenti viene ignorato. Se nessun elemento è abbinato, viene restituita una selezione vuota.

L'HTML

Questo è l'HTML che useremo.

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

Selettore

Il filtraggio mediante selettori è uno dei modi più semplici per filtrare una selezione.

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

Funzione

Il filtraggio di una selezione mediante una funzione è utile se non è possibile utilizzare i selettori.

La funzione è chiamata per ogni elemento nella selezione. Se restituisce un valore true , l'elemento verrà aggiunto alla selezione restituita.

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

Elementi

Puoi filtrare per elementi DOM. Se gli elementi DOM sono nella selezione, saranno inclusi nella selezione restituita.

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

Selezione

Puoi anche filtrare una selezione con un'altra selezione. Se un elemento è presente in entrambe le selezioni, verrà incluso nella selezione restituita.

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

metodo find ()

Il metodo .find () ci permette di cercare tra i discendenti di questi elementi nell'albero DOM e costruire un nuovo oggetto jQuery dagli elementi corrispondenti.

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

Produzione

• A1
• A2
• A3

• B1
• B2
• B3