J'ai une liste d'éléments avec un attribut comme suit
var hiddenSoc = [6080,9633];
$("#filter .list li").each(function () {
if($(this).is( "[grouping-id="+ hiddenSoc +"]" )) {
$(this).removeClass("show-item");
}
});
Je dois vérifier si chaque identifiant de regroupement est dans le tableau ou non. Si n'est PAS dans le tableau, alors supprimez la classe "show-item"
C'est ce que j'essaye
<li grouping-id="6080" class="show-item"></li> <li grouping-id="9938" class="show-item"></li> <li grouping-id="9633" class="show-item"></li>
Mais pour le moment, " hiddenSoc "prend tous les tableaux à la fois. Je dois vérifier chacun d'eux à la fois et supprimer la classe si elle n'est pas dans le tableau
6 Réponses :
Le problème est que vous concaténez un tableau entier dans le sélecteur d'attribut. Vous devez à la place trouver des valeurs dans le tableau qui correspondent au grouping-id actuel, puis ajouter / supprimer la classe si nécessaire.
Pour ce faire, vous pouvez utiliser une combinaison de indexOf ( ) et toggleClass () , comme ceci:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filter">
<ul class="list">
<li data-grouping-id="6080" class="show-item">A</li>
<li data-grouping-id="9938" class="show-item">B</li>
<li data-grouping-id="9633" class="show-item">C</li>
</ul>
</div>
.show-item {
color: #C00;
}
var hiddenSoc = [6080, 9633];
$("#filter .list li").each(function() {
var $el = $(this);
$el.toggleClass('show-item', hiddenSoc.indexOf($el.data('grouping-id')) != -1);
});
Notez que l'attribut grouping-id n'est pas standard. En tant que tel, je l'ai converti en un attribut data- * , qui peut être utilisé pour stocker toutes les métadonnées personnalisées dans un élément. Notez également que la logique peut être rendue encore plus simple si la classe show-item n'est pas du tout présente dans le DOM lorsque la page se charge.
Utilisation de filter () et indexOf () a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filter">
<ul class="list">
<li grouping-id="6080" class="show-item">1</li>
<li grouping-id="9938" class="show-item">2</li>
<li grouping-id="9633" class="show-item">3</li>
</ul>
</div>
.show-item {
color: red;
}
var hiddenSoc = [6080, 9633];
$("#filter .list li").filter(function() {
return hiddenSoc.indexOf(+$(this).attr("grouping-id")) > -1;
}).removeClass("show-item");
Ou une syntaxe plus condensée: $ ("# filter .list li"). Filter (() =>! HiddenSoc.contains (+ $ (this) .attr ("grouping-id"))). RemoveCla ss ("show-item")
ah, en effet, mon mal. Qu'en est-il de $ ("# filter .list li"). Filter (elem =>! HiddenSoc.contains (+ $ (elem) .attr ("grouping-id"))). RemoveCla ss ("show- article ")
@JeremyThille Parfois, la vieille école est la meilleure. qu'il en soit ainsi. contains () appartient-il à Array.prototype ?
Ah, je mélange toujours contient et inclut . Ouais, désolé, ignore juste mes commentaires :)
Pour ma part, je l'aurais fait à sa manière:
var hiddenSoc = [6080,9633];
$("#filter .list li").each(function () {
if(!hiddenSoc.includes(parseInt($(this).attr("grouping-id"))))
{
$(this).removeClass("show-item");
}
});
Voici la documentation de la fonction de tableau d'inclusion en JavaScript.
Au lieu de chercher si la valeur d'attribut de votre élément EST l'une des valeurs de tableau, pensez-la dans l'autre sens. Mon tableau contient-il la valeur d'attribut de mon élément. Vérifiez si une valeur est dans un tableau vs Vérifiez si un tableau contient une valeur spécifique.
Il faudrait utiliser parseInt() car .includes est basé sur des comparaisons === , et vous êtes vérifie maintenant si des chaînes sont présentes dans un tableau de nombres. En outre, veuillez ne pas ajouter d'ajouts à votre réponse en tant que commentaires, mieux vaut modifier la réponse à la place.
@PeterB, oui c'est vrai, j'ai raté cette partie. if (hiddenSoc.includes (parseInt ($ (this) .attr ("grouping-id"))) ) Merci pour votre avis.
Cela fait exactement le contraire de ce que souhaite OP. Le but est de supprimer la classe des éléments qui ne sont PAS dans le tableau. Changez votre code en ! HiddenSoc.includes ..... et cela devrait fonctionner
Vous pouvez créer un sélecteur en utilisant réduire et lui fournir le préfixe de JQuery : not . Cela sélectionnera tout ce qui ne correspond pas à la requête spécifiée.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li grouping-id="6080" class="show-item">stuff</li> <li grouping-id="9938" class="show-item">stuff</li> <li grouping-id="9633" class="show-item">stuff</li>
.show-item {
display: list-item;
}
li {
display: none;
}
var hiddenSoc = [6080,9633],
socSelector = () => hiddenSoc.reduce((acc, v, i) => acc += `${i > 0 ? ",":""}[grouping-id="${v}"]`,"");
$(`li:not('${socSelector()}')`).each((i,e) => e.classList.remove("show-item"));
Vous pouvez vérifier la valeur de l'attribut si elle n'est pas incluse dans le tableau:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filter">
<ul class="list">
<li grouping-id="6080" class="show-item">111</li>
<li grouping-id="9938" class="show-item">222</li>
<li grouping-id="9633" class="show-item">333</li>
</ul>
</div>
.show-item{
color: red;
}
var hiddenSoc = [6080,9633];
$('#filter .list li').each(function(){
var gid = Number($(this).attr('grouping-id'));
if(!hiddenSoc.includes(gid))
$(this).removeClass("show-item");
});
C'était aussi ma première réponse, mais quelqu'un a souligné que c'était exactement le contraire. OP veut supprimer la classe des éléments qui ne sont PAS dans le tableau.
@JeremyThille, je ne peux pas croire à quel point j'ai manqué If is NOT in the array, then remove the class "show-item" ..... merci de m'avoir corrigé :)
Tout comme une autre option, vous pouvez également utiliser not () pour effectuer le filtrage.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filter">
<ul class="list">
<li grouping-id="6080" class="show-item">6080</li>
<li grouping-id="9938" class="show-item">9938</li>
<li grouping-id="9633" class="show-item">9633</li>
</ul>
</div>
#filter .list li:not(.show-item) {
display: none;
}
var hiddenSoc = [ 6080, 9633 ];
var exclusions = hiddenSoc.map( it => `[grouping-id="${it}"]` ).join( ',' );
$( '#filter .list li' ).not( exclusions ).removeClass( 'show-item' );
Vous ne pouvez pas donner un tableau comme égalité d'arguments. Vous devez saisir l'identifiant de regroupement et voir s'il est dans le tableau
Oui, mais le code affiché tente de faire le contraire, d'où la confusion, mes excuses. :)