web-dev-qa-db-fra.com

Avec jQuery, comment ne trouvez-vous que des éléments visibles et laissez-vous les éléments cachés?

Je commence donc par les points 1 à 4:

<div class="someDiv bold italic" style="display: none;">Lorem</div>
<div class="someDiv regular italic" style="display: block;">Lorem</div>
<div class="someDiv bold" style="display: none;">Ipsum</div>
<div class="someDiv regular" style="display: block;">Ipsum</div>

Ensuite, j'ai quelques cases à cocher:

<input class="regular" type="checkbox" />
<input class="bold" type="checkbox" />
<input class="italic" type="checkbox" />

Donc, fondamentalement, jQuery montre et cache des divs. Maintenant, j'ai une autre fonction qui doit parcourir ces divs (une pour chaque case à cocher) et afficher/masquer en fonction d'un autre critère. Mais je ne veux pas que les div déjà cachés soient montrés à nouveau.

$(".someDiv").each(function(){
  if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  };

Dans cet exemple, le seul div restant devrait être le dernier div. Malheureusement, ce code fera apparaître les deuxième et quatrième divs.

Ce code est un exemple très basique de tous les filtres que je vais appliquer, ajouter, etc.

javascriptjquerytoggleshow-hide
46
o_O

Vous pouvez utiliser le sélecteur : visible pour ne trouver que visible.

$(".someDiv:visible").each(....);

Vous pouvez utiliser le sélecteur . Not () pour ne trouver que caché.

$(".someDiv").not(":visible").each(....);

Je pense que vous pouvez effectuer la même opération dans votre code avec cette ligne.

$(".someDiv").hide().find(".regular").show();

Trouver tout .someDiv et les cacher, puis trouver ceux avec un .regular classe et leur montrer.

75
Reactgular

Vous pouvez utiliser :visible sélecteur pour sélectionner le .someDiv qui sont visibles.

$(".someDiv:visible").each(function(){
 if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  }
});

Voici une autre façon amusante d'utiliser l'enchaînement :) et de le rendre simple ligne.

$('.someDiv:visible').not($('.someDiv.regular:visible')).hide();
10
PSL

Vous pouvez le faire de deux manières: Vous pouvez ajouter une autre classe pour le display: none éléments et les rendre invisibles via css, ou vous pouvez trouver la propriété css via jquery

via css class

html

<div class="someDiv bold italic hidden" >Lorem</div>
<div class="someDiv regular italic" >Lorem</div>
<div class="someDiv bold hidden" >Ipsum</div>
<div class="someDiv regular" >Ipsum</div>

css

.someDiv{
    display: block;
}

.hidden{
    display: none;
}

js

$(".someDiv").each(function(){
  if($(this).hasClass("hidden")){
    $(this).show();
  } else {
    $(this).hide();
  };

via jquery

$(".someDiv:visible").each(function(){
 if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  }
});
2
Niche

Vous pouvez utiliser le sélecteur :not() et filtrer les résultats avant d'entrer dans le .each():

$(".someDiv:not(:hidden)").each(function(){
1
Ja͢ck