Utilisation de jQuery pour sélectionner les éléments qui ont un style “visibility:visible” ou “visibility:hidden” PAS “display: none”

Comment choisissez-vous les seuls éléments visibles à l'aide de jQuery?

sélecteurs jQuery :visible et invisible respecte display:none comme vraiment caché? PAS visibility:hidden ou visibility:visible.

Je comprends qu'ils ne sont pas techniquement caché parce qu'ils ont encore prendre leur espace. Je veux juste savoir leur état afin que je puisse vérifier les cases qui sont visibles.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery :visiblity Selector Test</title>

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("#VisibleCount").text($("input[type=checkbox]:visible").length); //returns 3. I think it should be 2
        $("#HiddenCount").text($("input[type=checkbox]:hidden").length); //returns 1. I think it should be 2
    });
</script>

<style type="text/css">
    #TestArea
    {
        border: solid red 1px;
    }
    #Results
    {
        background-color: Lime;
    }
    .container
    {
        border: solid black 1px;
    }
</style>
</head>
<body>
<div id="TestArea">
    <div class="container">
        visibility: hidden;<div style="visibility: hidden;">
            <input id="Checkbox1" type="checkbox" />
        </div>
    </div>
    <div class="container">
        visibility: visible;<div style="visibility: visible;">
            <input id="Checkbox2" type="checkbox" />
        </div>
    </div>
    <div class="container">
        display: none;<div style="display: none;">
            <input id="Checkbox3" type="checkbox" />
        </div>
    </div>
    <div class="container">
        display: inline;<div style="display: inline;">
            <input id="Checkbox4" type="checkbox" />
        </div>
    </div>
</div>
<div id="Results">
    <div>
        Visible Count: <span id="VisibleCount"></span>
    </div>
    <div>
        Hidden Count: <span id="HiddenCount"></span>
    </div>
</div>
</body>
</html>

OriginalL'auteur Peter Samuel | 2010-02-17

  1. 41

    Vous pouvez utiliser le css fonction permettant d'obtenir le style de l'élément, et la filter fonction pour sélectionner à partir d'une collection d'éléments:

    var visible = $('input[type=checkbox]').filter(function() {
   return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none');
});
    +1 pour la fourniture d'une solution (même si vous n'avez pas à creuser jusqu'à ce qu'il se passe 🙂
    Super, merci les gars! J'ai utilisé cela avec chaînage pour réduire mon jeu de résultats: $("input[type=checkbox]").filter(function() { return !($(this).css('visibilité') == 'hidden' || $(this).css('display') == 'none'); }).each(function() { this.checked = true; });
    Vérifiez également ma réponse pour plus de la possibilité de réutilisation avec un sélecteur jquery.

    OriginalL'auteur Guffa

  2. 11

    De la jQuery 1.3.2 notes de version (:visible/caché Révisé):

    • En jQuery 1.3.1 (et plus) d'un élément est visible que si son CSS

      "affichage" n'était pas "rien", son CSS

      "visibilité" n'était pas "caché", et

      son type (si c'était une entrée) n'a pas été
      "caché".
    • En jQuery 1.3.2 un élément est visible que si son navigateur déclarés
      offsetWidth ou offsetHeight est
      supérieure à 0.

    Que signifie ce changement? Cela signifie
    que si votre élément CSS display est
    "aucun", ou l'un de ses parent/ancêtre
    de l'élément d'affichage est "none", ou si l'
    l'élément largeur est de 0 et de l'élément
    la hauteur est de 0 alors un élément sera
    signalé comme caché.

    +1 pour creuser jusqu'à ce qu'il se passe (même si elle ne fournit pas une solution pour résoudre le problème).

    OriginalL'auteur karim79

  3. 7

    J'ai créé ma propre sélecteur de :montre pour cela. Utilisation:

    var visible = $('input[type=checkbox]').is(':shown');

    Ou (etc):

    $("#VisibleCount").text($("input[type=checkbox]:shown").length);

    Il suffit d'inclure ce simple code quelque part:

    jQuery.extend(jQuery.expr[':'], {
  shown: function (el, index, selector) {
    return $(el).css('visibility') != 'hidden' && $(el).css('display') != 'none' && !$(el).is(':hidden')
  }
});

    OriginalL'auteur Kapitein Witbaard