elementy Hrabia li, które są widoczne z jQuery

Question

Im licząc moich elementów li z poniższego skryptu 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); 
    }); 

- > Skrypt zwraca:

zmienić właściwość niektórych elementów li style="display: none" gdy $(document).ready z jQuery, jak: $('.2').show();

Teraz chcę zmienić skrypt w taki sposób, aby liczyć tylko elementy widoczne li z poniższym skrypcie (i tylko dodał: widoczna po docs jQuery):

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

-> skrypt Powroty: nic

nie mam pojęcia, dlaczego to nie działa o ut - może ktoś ma jakąś wskazówkę lub pomysł? Każda pomoc jest bardzo doceniana. Z góry dziękuję!

Answer 1

praca dobrze dla mnie

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

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

Answer 2

działa dobrze tutaj:

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

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

Teraz, używając liczb jako nazw klas jest nielegalne. (W3C Spec, punktor 2) Nazwy klas muszą rozpoczynać się od litery. Może manipulowanie z tym powoduje problemy?

Poza tym, mogę się tylko domyślać, problem jest gdzie indziej. Czy używasz najnowszej wersji jQuery? (Chociaż w moich testach działa z powrotem do wersji 1.3, a następnie nie działa w ogóle)

Czy błędnie napisałeś "widoczny" w faktycznym kodzie. (Robiłem to już wcześniej)

Answer 3

To działa tak:

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

można zobaczyć przykładowe there pracy.

Answer 4

Twój skrypt nic nie zwraca, ponieważ wszystkie DIV są ukryte. Zwraca 1 po wyświetleniu 1.

Answer 5

Wystarczy spojrzeć na to: http://jsfiddle.net/vnMrQ/

Answer 6

Tak, jak wszyscy już powiedział, to działa dobrze, nawet kiedy.show() element doc gotowe:

http://jsfiddle.net/bKyt4/

Answer 7

Próbowałem to na zewnątrz i wydaje się działać tj dostaję wynik "1".

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

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

NB: Nie sądzę o liczbie do wartości atrybutu jest prawidłowych znaczników

Answer 8

Element przyjęto jako ukryty lub jeśli jego rodzice nie zużywa miejsca w dokumencie. Widoczność CSS nie jest brana pod uwagę.

Widok:

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

Zrobiłem jsfiddle dla Ciebie: http://jsfiddle.net/mgrcic/3BzKT/3/

Answer 9

W jednej linii po prostu określić div lub rozpiętości lub akapit, w którym ma być wyświetlany licznik, aw drugiej linii ul zawierających li

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