jQuery Filter Objets par valeur d'attribut de données

Cet article décrit comment utiliser jQuery pour filtrer les éléments en fonction des valeurs d'attribut de données. L'extrait de code suivant sélectionne tous les éléments Div avec des ID commençant par "Proto_" et la valeur "State" de l'attribut de données est "Ouvert":

<code class="language-javascript">var $el = $('div[id^=proto_]').filter(function() {
    return ($(this).data("state") == "open");
});
console.log($el);</code>

Demo jsfiddle

Version optimisée

Merci à VLAD pour la solution d'optimisation:

<code class="language-javascript">var $el = $('div[id^=proto_]').filter('div[data-state=open]').css('color','red');</code>

JSFiddle Optimize Version Demo

FAQ pour jQuery Filtrage des objets par attributs de données

Comment utiliser jQuery pour filtrer les objets en fonction des attributs de données?

jQuery fournit des moyens puissants de manipuler et de filtrer les objets en fonction des attributs de données. Cela peut être réalisé en utilisant la fonction .filter() de jQuery. La fonction .filter() permet de spécifier une fonction comme paramètre, qui doit renvoyer vrai ou faux. Si la fonction renvoie true, l'élément sera inclus dans la collection filtrée; si FALSE est retourné, il ne sera pas inclus. Voici un exemple de base:

<code class="language-javascript">$('div').filter(function() {
  return $(this).data('key') === 'value';
});</code>

Cet exemple filtre tous les éléments Div avec une valeur de "clé" pour les attributs de données.

Quelle est la différence entre

et .filter() dans .find()?

.filter() et .find() sont les deux méthodes jQuery utilisées pour réduire la portée de recherche des éléments dans les objets jQuery. Leurs principales différences sont les suivantes: .filter() rétrécit l'ensemble des éléments correspondants aux éléments qui correspondent ou passent le test de fonction, tandis que .find() obtient les descendants de chaque élément dans la collection d'élément correspondante actuelle et passe le sélecteur, l'objet jQuery ou les éléments à filtre.

Puis-je utiliser plusieurs attributs de données dans la fonction .filter()?

Oui. Ajoutez simplement plus de conditions à la fonction. Par exemple:

<code class="language-javascript">$('div').filter(function() {
  return $(this).data('key1') === 'value1' && $(this).data('key2') === 'value2';
});</code>

Cet exemple filtre tous les éléments div avec une valeur de "key1" de l'attribut de données "Value1" et une valeur de "key2" de l'attribut de données "Value2".

Comment filtrer les éléments en fonction des valeurs d'attribut de données contenant une chaîne spécifique?

Vous pouvez utiliser l'attribut contenant des sélecteurs [name*="value"] pour sélectionner des éléments dont la valeur d'attribut contient une chaîne spécifique. Par exemple:

<code class="language-javascript">$('div[data-key*="value"]').filter(function() {
  // 您的代码
});</code>

Cet exemple filtre toutes les valeurs "Key" "Key" contenant des éléments div avec une chaîne "valeur".

peut être utilisé .filter() avec d'autres méthodes jQuery?

Oui. Par exemple, vous pouvez utiliser .filter() avec .css() pour modifier le style de l'élément filtrant:

<code class="language-javascript">$('div').filter(function() {
  return $(this).data('key') === 'value';
}).css('color', 'red');</code>

Cet exemple modifie la couleur du texte de tous les éléments div avec la valeur "clé" de "valeur" en rouge.

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!