Количество элементов li, видимых с помощью jQuery

Im подсчет моих элементов li со следующим скриптом 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); 
    });

--> возвращает скрипт: 3

изменить style="display: none" свойство некоторых элементов li, когда $(document).ready с jQuery, как:$('.2').show();

теперь я хочу изменить скрипт таким образом, чтобы считать только видимые элементы li со следующим скриптом (я только что добавил: видимый следуя документам jQuery):

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

--> возвращает скрипт: ничего

Я понятия не имею, почему это не работает - может быть, у кого-нибудь есть подсказка или идея? Любая помощь значительно appreaciated. Спасибо заранее!

11
css html html-lists jquery jquery-selectors

9 ответов

работайте отлично для меня

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

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

17

отлично работает и здесь:

http://jsfiddle.net/jtbowden/FrPPr/ (1 просматривается)

http://jsfiddle.net/jtbowden/FrPPr/1/ (0 видимых)

теперь, используя числа в качестве имен классов незаконно. (W3C Spec, пуля 2) имена классов должны начинаться с буквы. Может быть, манипуляции с этим вызывают проблемы?

кроме этого, я могу только догадываться, что ваша проблема в другом месте. Вы используя последнюю версию jQuery? (Хотя в моих тестах он работает до 1.3, а затем он вообще не работает)

вы неправильно написали "видимый" в своем фактическом коде. (Я делал это раньше)

8

элемент считается скрытым, если он или его родители не потребляют места в документе. Видимость CSS не учитывается.

вид:

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

Я сделал jsfiddle для вас:http://jsfiddle.net/mgrcic/3BzKT/3/

2

это работает так:

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

вы можете увидеть рабочий пример здесь.

1

просто взгляните на это: http://jsfiddle.net/vnMrQ/

1

да, как все уже сказал, он отлично работает, даже когда вы .показать () элемент doc ready:

http://jsfiddle.net/bKyt4/

1

ваш скрипт ничего не возвращает, потому что все DIV скрыты. Он возвращает 1, когда отображается 1.

0

Я пробовал это, и, похоже, это работает, т. е. я получаю результат "1".

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

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

NB: я не думаю, что наличие чисел для значения атрибута является допустимой разметкой

0

в строке один просто определите div или span или абзац, где вы хотите отобразить count, а во второй строке ul, содержащий li

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