Libérer le potentiel de la navigation DOM / Blogs / Perficient

Exemple 3: Utilisation de la méthode find()

trouver(): Cette méthode vous permet de rechercher des éléments descendants au sein d’un élément sélectionné.

<ul>
  <li id="parentOne">
    Parent 1
    <ul id="child">
      <li>Child 1</li>
      <li>Child 2</li>
      <li>Child 3</li>
    </ul>
  </li>
  <li>
    Parent 2
    <ul>
      <li>Child 1</li>
      <li>Child 2</li>
    </ul>
  </li>
</ul>

Sortir avant en appliquant la méthode find() :

 // JavaScript
$('#parentOne').find('li').css('color', '#200393');

Sortir après en appliquant la méthode find() :

Le code ci-dessus sélectionne l’élément avec l’ID « parent1 » et trouve tous les éléments

2. 
   

   Traversée entre frères et sœurs :

Le parcours fraternel nous permet de sélectionner des éléments qui partagent le même parent. Les principales méthodes de traversée des frères et sœurs dans jQuery sont siblings(), next(), prev() et nextAll().

Exemple 1: Utiliser la méthode siblings()

frères et sœurs(): Cette méthode sélectionne tous les éléments frères de l’élément sélectionné.

<ul>
  <li id="parentOne">
    Parent 1
    <ul id="child">
      <li class="item">Child 1</li>
      <li class="selected">Child 2</li>
      <li class="item">Child 3</li>
    </ul>
  </li>
  <li>
    Parent 2
    <ul>
      <li class="selected">Child 1</li>
      <li class="item">Child 2</li>
    </ul>
  </li>
</ul>

Sortir avant en appliquant la méthode siblings() :

//Javascript
$('.selected').siblings().css('background-color', 'yellow'); 

Sortir après en appliquant la méthode siblings() :

Le code sélectionne l’élément avec la classe « sélectionné » et applique un style CSS à tous ses éléments frères.

Exemple 2 : Utiliser la méthode next()

suivant(): Cette méthode utilisera le prochain frère de la classe sélectionnée.

<ul>
  <li id="parentOne">
    Parent 1
    <ul id="child">
      <li class="item">Child 1</li>
      <li class="selected">Child 2</li>
      <li class="item">Child 3</li>
    </ul>
  </li>
  <li>
    Parent 2
    <ul>
      <li class="selected">Child 1</li>
      <li class="item">Child 2</li>
    </ul>
  </li>
</ul>

Sortir avant en appliquant la méthode next() :

// JavaScript
$('.selected').next().css({'text-decoration' : 'underline' , 'color' : '#200393'});

Sortir après en appliquant la méthode next() :

Le code sélectionne l’élément avec la classe « sélectionné » et applique un style CSS à son élément frère suivant. Il souligne et définit la couleur rouge pour le texte des éléments frères suivants.

<ul>
  <li id="parentOne">
    Parent 1
    <ul id="child">
      <li class="item">Child 1</li>
      <li class="selected">Child 2</li>
      <li class="item">Child 3</li>
    </ul>
  </li>
  <li>
    Parent 2
    <ul>
      <li class="selected">Child 1</li>
      <li class="item">Child 2</li>
    </ul>
  </li>
</ul>

Sortir avant en appliquant la méthode prev() :

// JavaScript
$('.selected').prev().css({'text-decoration' : 'underline' , 'color' : '#200393'});

Sortir après en appliquant la méthode prev() :

Le code sélectionne l’élément avec la classe « sélectionné » et applique un style CSS à son élément frère précédent. Il souligne et définit la couleur du texte de l’élément frère précédent.

3. 
   

   Filtrage du parcours:

Le filtrage traversant nous permet de sélectionner des éléments en fonction de conditions spécifiques. Les principales méthodes de filtrage du parcours dans jQuery sont filter(), not(), is() et has().

Exemple 1: Utilisation de la méthode filter()

Filtre(): Cette méthode sélectionne un élément d’une classe particulière.

<ul>
  <li id="parentOne">
    Parent 1
    <ul id="child">
      <li class="item">Child 1</li>
      <li class="selected">Child 2</li>
      <li class="item">Child 3</li>
    </ul>
  </li>
  <li>
    Parent 2
    <ul>
      <li class="selected">Child 1</li>
      <li class="item">Child 2</li>
    </ul>
  </li>
</ul>

Sortir avant en appliquant la méthode filter() :

//Javascript
$('li').filter('.item').css( "background-color", "yellow" );

Sortir après en appliquant la méthode filter() :

Dans l’exemple, sélectionnez uniquement les éléments de classe « item », dont la classe correspond et appliquez un style CSS.

Exemple 2 : Utiliser la méthode not()

Pas(): Cette méthode sélectionnera tous les éléments sauf la classe particulière.

<ul>
  <li id="parentOne">
    Parent 1
    <ul id="child">
      <li class="item">Child 1</li>
      <li class="item selected">Child 2</li>
      <li class="item">Child 3</li>
    </ul>
  </li>
  <li>
    Parent 2
    <ul>
      <li class="item selected">Child 1</li>
      <li class="item">Child 2</li>
    </ul>
  </li>
</ul>

Sortir avant en appliquant la méthode not() :

//Javascript
$('li.item').not('.selected').css( "background-color", "yellow" );

Sortir après en appliquant la méthode not() :

Pour sélectionner tous les éléments de la liste sauf celui avec la classe « sélectionné », la couleur d’arrière-plan sera définie sur bleu sauf avec le nom de classe « sélectionné ».

Conclusion:
jQuery simplifie la manipulation du DOM en fournissant des méthodes puissantes pour sélectionner, modifier et interagir avec les éléments HTML. Cela permet aux développeurs de naviguer efficacement dans l’arborescence DOM et de créer des applications Web interactives.