À l'aide de jQuery, comment trouvez-vous les seuls éléments visibles et de laisser les éléments cachés seul?

Donc je commence avec 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>

Alors j'ai une entrée de cases à cocher:

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

Donc en gros j'ai jQuery affichage et masquage des divs. Maintenant, j'ai une autre fonction que doit parcourir ces divs (un pour chaque case à cocher), et afficher/masquer en fonction d'un autre critère. Mais je ne veux pas déjà caché divs pour être montré à nouveau.

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

Dans cet exemple, la div doit être le dernier de la div. Malheureusement, ce code va faire le deuxième et quatrième divs montré.

Ce code est l'exemple de base de tous les filtres, je vais à l'application, en ajoutant etc.

InformationsquelleAutor o_O | 2013-05-28
  1. 80

    Vous pouvez utiliser le :visibles sélecteur pour trouver seulement visible.

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

    Vous pouvez utiliser le .non() sélecteur pour trouver seulement cachés.

    $(".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 tous les .someDiv et les cacher, puis de trouver ceux avec un .regular classe et de leur montrer.

    • ce sujet pour les boutons qui sont cachés? $('button:visible') ?
    InformationsquelleAutor Reactgular
  2. 10

    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 un autre drôle de façon en utilisant la chaîne 🙂 et en faire une seule ligne.

    $('.someDiv:visible').not($('.someDiv.regular:visible')).hide();
    • est déjà visibles, afin de montrer à ne pas faire n'importe quoi.
    • l'OP du code n'est pas correct. 😉
    • Je suis de ton homme !!! 🙂
    • $(".someDiv.regular:hidden").show();
    • $(".someDiv").not(".regular").hide();
    • $(".someDiv").hide().find(".regular").show();

    InformationsquelleAutor PSL
  3. 2

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

    par classe css

    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();
  }
});
    InformationsquelleAutor Niche
  4. 1

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

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