Comment pouvez-vous utiliser jQuery pour rechercher des éléments HTML en fonction des valeurs d'attributs de données ?

Recherche d'éléments par valeur d'attribut de données dans jQuery

En HTML, les attributs de données sont utilisés pour stocker des informations qui peuvent être utilisées par JavaScript et CSS. Pour accéder aux éléments en fonction de leurs valeurs d'attribut de données, jQuery propose plusieurs options.

Sélecteur d'attribut égal

L'approche la plus simple consiste à utiliser le sélecteur d'attribut égal :

$('.slide-link[data-slide="0"]').addClass('active');

Ce sélecteur fait correspondre les éléments avec un attribut de données spécifique et une valeur spécifique. Dans ce cas, il sélectionnera l'élément avec data-slide="0" et y ajoutera la classe active.

Utilisation de la méthode .find()

Une approche alternative consiste à utiliser la méthode .find() pour rechercher des éléments descendants dans les éléments correspondants :

$('.slide-link').find('[data-slide="0"]').addClass('active');

Cependant, cette méthode recherche les descendants, pas les éléments parents. Cela ne fonctionnera pas dans ce scénario car l'élément cible est un parent de l'élément que nous recherchons.

Comprendre la méthode .find()

Le .find () est conçue pour parcourir l'arborescence DOM vers le bas, en recherchant les éléments descendants qui correspondent à un sélecteur spécifié. Il ne recherche pas les éléments parents.

<!-- HTML Code -->
<div class="container">
  <p>Paragraph 1</p>
  <div class="nested-container">
    <p>Nested Paragraph</p>
  </div>
</div>

<!-- jQuery Code -->
$('.container').find('p').text('Hello World');

Dans cet exemple, .find('p') recherchera tous les éléments

éléments qui sont des enfants de .container. Il ne correspondra pas au

élément à l'intérieur du conteneur imbriqué car ce n'est pas un enfant direct de .container.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!