Le comte li éléments qui sont visibles avec jQuery

Im comptage mon li éléments avec les éléments suivants script jQuery:

HTML:

<ul class="relatedelements">
   <li style="display:none;" class="1">anything</li>
   <li style="display:none;" class="2">anything</li>
   <li style="display:none;" class="3">anything</li>
</ul>

jQuery:

    $(function() {
        var numrelated=$('.relatedelements > li').length;
        $('.num-relatedelements').html(numrelated); 
    });

--> Le script retourne: 3

- Je changer la style="display: none" propriété de certains de la li éléments lorsque $(document).ready avec jQuery, comme: $('.2').show();

Je veux maintenant changer le script de façon à ne compter que le visible li éléments avec le script suivant (j'ai juste ajouté :visible à la suite de la jQuery docs):

    $(function() {
        var numrelated=$('.relatedelements > li:visible').length;
        $('.num-relatedelements').html(numrelated); 
    });

--> Le script retourne: rien

Je n'ai aucune idée de pourquoi ça ne marche pas - peut-être que quelqu'un a des conseil ou une idée?
Toute aide est la bien appréciés. Merci d'avance!

Merci à tous! je pense donc, mon problème est ailleurs dans le code - Cependant c'est étrange, comme le couting script fonctionne, mais quand j'ajoute :visible il se bloque. Cependant, je suis maintenant à l'aide d'une solution de contournement. Quand j'ai changer l'affichage de:aucune propriété css, je suis en ajoutant une classe .addClass("countme") de la li les éléments qui sont visibles. Je suis maintenant en comptant tous li éléments qui ont la classe li.countme Merci pour votre aide!

InformationsquelleAutor Dominic | 2012-04-13

beau travail pour moi

$(document).ready(function(){
    $('.2').show();
    var numrelated=$('.relatedelements > li:visible').length;
    $('.num-relatedelements').html(numrelated); 
});

JsFiddle Lind : http://jsfiddle.net/xuckF/1/

Grâce RVSharepoint pour votre aide et vos conseils.

InformationsquelleAutor Rony SP

8

Fonctionne très bien ici:

http://jsfiddle.net/jtbowden/FrPPr/ (1 visible)

http://jsfiddle.net/jtbowden/FrPPr/1/ (0 visible)

Maintenant, en utilisant des numéros comme les noms de classe est illégale. (Spec W3Cde balle, 2) les noms de Classe doivent commencer par une lettre. Peut-être faire les manipulations qui est à l'origine des problèmes?

Autre que cela, je ne peux que deviner votre problème est ailleurs. Êtes-vous à l'aide de la dernière version de jQuery? (Bien que dans mes tests, cela fonctionne tout le chemin du retour à 1,3, puis ça ne marche pas à tous)

Avez-vous orthographiez mal "visible" dans votre code. (J'ai fait ça avant)
- Merci Jeff pour vos conseils!
InformationsquelleAutor Jeff B

Élément supposé caché que si lui ou ses parents consomme pas d'espace dans le document. CSS visibilité n'est pas pris en compte.

Vue:

<ul class="relatedelements">
   <li class="1 hidden">anything</li>
   <li class="2 hidden">anything</li>
   <li class="3 hidden">anything</li>
   <li class="4">anything</li>
    <li class="5">anything</li>
    <li class="6">anything</li>
    <li class="7 hidden">anything</li>
</ul>

<div class="num-relatedelements"></div>

CSS

.hidden {
    display: none;
}

$(function() {  
   var numrelated= $('.relatedelements > li:not(.hidden)').length;
   alert(numrelated);
   $('.num-relatedelements').html(numrelated); 
});

J'ai fait un jsfiddle pour vous: http://jsfiddle.net/mgrcic/3BzKT/3/

Merci pour votre réponse. Avec l'idée de la "caché" de la classe, je suis maintenant l'ajout d'une classe "countme" à chaque élément que je suis en train de changer avec .show() et il fonctionne très bien!
heureux, il a aidé.

InformationsquelleAutor Matija Grcic

Il fonctionne comme ça:

$(function() {
    var numrelated=$('.relatedelements > li:visible').length;
    $('.num-relatedelements').html(numrelated); 
});

Vous pouvez voir exemple de travail il y.

Merci pour votre astuce, PrimosK

InformationsquelleAutor PrimosK

1

Il suffit de prendre un coup d'oeil à ceci:
http://jsfiddle.net/vnMrQ/
- Marcin, merci!
InformationsquelleAutor Marcin Wieprzkowicz
1

Oui, comme tout le monde l'a déjà dit, il fonctionne très bien, même lorsque vous .show() de l'élément doc prêt:

http://jsfiddle.net/bKyt4/
- Merci pour vos conseils!
InformationsquelleAutor Charlie Sheather
0

Votre script ne renvoie rien, car tous les DIV sont cachés. Elle renvoie 1 si 1 est affiché.
- Elle retournera toujours à "0" lorsque tous sont cachés.
- Je corrige la position des mains.
InformationsquelleAutor ONOZ
0

J'ai essayé ceci et cela semble marcher, c'est à dire un résultat de "1".
```
$(function() {
    $('.2').show();

    var numrelated=$('.relatedelements > li:visible').length;
    $('.num-relatedelements').html(numrelated); 
});
```
NB: je ne pense pas avoir les numéros de la valeur d'un attribut est valable de balisage
- Merci Peter, je pense, alors, mon problème est ailleurs - Mais c'est étrange, comme le couting fonctionne, mais quand j'ajoute :visible qu'elle se bloque. Cependant, je suis maintenant à l'aide d'une solution de contournement. Quand j'ai changer l'affichage de:aucune propriété css je vais ajouter une catégorie".addClass("countme") " à la li les éléments qui sont visibles. Je suis maintenant en comptant tous li éléments qui ont la classe li.countme Merci pour votre aide!
- Pas de soucis. un plaisir de vous aider
InformationsquelleAutor Peter
0

En ligne l'une de définir simplement un div ou span ou un paragraphe où vous souhaitez afficher le comte, et dans la deuxième ligne de l'ul contenant li
```
 $('.notify').html(
 $('#ul-notifications li').length);
```
InformationsquelleAutor Salman Aziz

Vous devez vous connecter pour publier un commentaire.