elementi Conte li che sono visibili con jQuery

Question

Im contando i miei elementi li con il seguente 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); 
    }); 

- > Lo script restituisce:

ho modificare la proprietà style="display: none" di alcuni degli elementi li quando $(document).ready con jQuery, come: $('.2').show();

Ora voglio modificare lo script in modo da contare solo gli elementi li visibili con il seguente script (ho appena aggiunto: visibile seguendo la documentazione jQuery):

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

-> lo script restituisce: nulla

non ho idea perché non funziona o ut - forse qualcuno ha qualche consiglio o idea? Qualsiasi aiuto è molto apprezzato. Grazie in anticipo!

Answer 1

lavoro bene per me

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

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

Answer 2

funziona bene qui:

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

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

Ora, utilizzando i numeri come nomi delle classi è illegale. (W3C Spec, punto 2) I nomi delle classi devono iniziare con una lettera. Forse fare manipolazioni con questo sta causando problemi?

Oltre a questo, posso solo immaginare che il tuo problema sia altrove. Stai usando l'ultima versione di jQuery? (Anche se nei miei test, funziona fino alla 1.3, e poi non funziona affatto)

Ti sei sbagliato a digitare "visibile" nel tuo codice attuale. (Ho fatto prima)

Answer 3

E funziona così:

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

si può vedere ad esempio there lavoro.

Answer 4

Lo script non restituisce nulla perché tutti i DIV sono nascosti. Restituisce 1 quando viene mostrato 1.

Answer 5

Basta dare uno sguardo a questo: http://jsfiddle.net/vnMrQ/

Answer 6

Sì, come tutti hanno già detto, funziona benissimo, anche quando si.show() l'elemento doc pronto:

http://jsfiddle.net/bKyt4/

Answer 7

Ho provato questo fuori e sembra funzionare cioè ho un risultato di '1'.

$(function() { 
    $('.2').show(); 

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

NB: non credo che avere i numeri per il valore di un attributo è valido markup

Answer 8

Elemento assunto come nascosto se esso o dei suoi genitori non consuma spazio nel documento. La visibilità CSS non viene presa in considerazione.

Vista:

<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; 
}​ 

JS

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

ho fatto un jsfiddle per voi: http://jsfiddle.net/mgrcic/3BzKT/3/

Answer 9

In linea uno semplicemente definire un div o frammento o un paragrafo in cui si desidera visualizzare conteggio, e in seconda linea l'ul contenente li

$('.notify').html(
$('#ul-notifications li').length);