jQuery
Traversée DOM

Sélectionnez les enfants de l'élément

Pour sélectionner les enfants d'un élément, vous pouvez utiliser la méthode children() .

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

Changez la couleur de tous les enfants de l'élément .parent :

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

La méthode accepte un argument de selector facultatif pouvant être utilisé pour filtrer les éléments renvoyés.

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

Itération sur la liste des éléments jQuery

Lorsque vous devez parcourir la liste des éléments jQuery.

Considérez cette structure 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>

Pour imprimer le texte présent dans tous les éléments div avec une classe de red :

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

Astuce: key est l'index de l'élément div.red nous div.red actuellement, dans son parent. ele est l'élément HTML, nous pouvons donc créer un objet jQuery à l'aide de $() ou de jQuery() , comme ceci: $(ele) . Après, nous pouvons appeler n'importe quelle méthode jQuery sur l'objet, comme css() ou hide() etc. Dans cet exemple, nous tirons simplement le texte de l'objet.

Sélection des frères et sœurs

Pour sélectionner des frères et sœurs d'un élément, vous pouvez utiliser la méthode .siblings() .

Un exemple typique où vous voulez modifier les frères et sœurs d'un élément est dans un menu:

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

Lorsque l'utilisateur clique sur un élément de menu, la classe selected doit être ajoutée à l'élément cliqué et supprimée de ses frères et sœurs :

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

La méthode prend un argument de selector facultatif, qui peut être utilisé si vous devez limiter les types de frères et sœurs que vous souhaitez sélectionner:

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

Méthode la plus proche ()

Renvoie le premier élément qui correspond au sélecteur en commençant à l'élément et en parcourant l'arborescence 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') );

SORTIE

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

Méthode first (): la première méthode renvoie le premier élément de l’ensemble correspondant.

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

Sortie:

First paragraph: This is first paragraph in a div.

Obtenir l'élément suivant

Pour obtenir l'élément suivant, vous pouvez utiliser la méthode .next() .

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

Si vous êtes sur l'élément "Anna" et que vous voulez obtenir l'élément suivant, "Paul", la méthode .next() vous permettra de le faire.

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

La méthode prend un argument de selector facultatif, qui peut être utilisé si l'élément suivant doit être un certain type d'élément.

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

Si l'élément suivant ne fait pas partie du selector type selector un ensemble vide est renvoyé et les modifications ne feront rien.

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

Obtenir l'élément précédent

Pour obtenir l'élément précédent, vous pouvez utiliser la méthode .prev() .

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

Si vous êtes sur l'élément "Anna" et que vous voulez obtenir l'élément précédent, "Mark", la méthode .prev() vous permettra de le faire.

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

La méthode prend un argument de selector facultatif, qui peut être utilisé si l'élément précédent doit être un certain type d'élément.

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

Si l'élément précédent ne fait pas partie du selector type selector un ensemble vide est renvoyé et les modifications ne feront rien.

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

Filtrer une sélection

Pour filtrer une sélection, vous pouvez utiliser la méthode .filter() .

La méthode est appelée sur une sélection et renvoie une nouvelle sélection. Si le filtre correspond à un élément, il est ajouté à la sélection renvoyée, sinon il est ignoré. Si aucun élément n'est mis en correspondance, une sélection vide est renvoyée.

Le HTML

C'est le HTML que nous allons utiliser.

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

Sélecteur

Le filtrage à l'aide de sélecteurs est l'un des moyens les plus simples de filtrer une sélection.

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

Fonction

Filtrer une sélection à l'aide d'une fonction est utile s'il n'est pas possible d'utiliser des sélecteurs.

La fonction est appelée pour chaque élément de la sélection. S'il renvoie une valeur true , l'élément sera ajouté à la sélection renvoyée.

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

Éléments

Vous pouvez filtrer par éléments DOM. Si les éléments DOM sont dans la sélection, ils seront inclus dans la sélection renvoyée.

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

Sélection

Vous pouvez également filtrer une sélection par une autre sélection. Si un élément figure dans les deux sélections, il sera inclus dans la sélection renvoyée.

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

méthode find ()

La méthode .find () nous permet de rechercher parmi les descendants de ces éléments dans l’arborescence DOM et de construire un nouvel objet jQuery à partir des éléments correspondants.

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

Sortie

• A1
• A2
• A3

• B1
• B2
• B3