Элементы count li, которые видны с помощью jQuery

Im подсчитывает элементы li со следующим jQuery script:

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

- > Возвращает script: 3

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

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

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

- > Возвращает script: ничего

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

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

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

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

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

Ответ 3

Элемент считается скрытым, если он или его родители не занимают места в документе. Видимость 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/

Ответ 4

Он работает следующим образом:

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

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

Ответ 6

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

http://jsfiddle.net/bKyt4/

Ответ 7

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

Ответ 8

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

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

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

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

Ответ 9

В строке 1 просто укажите div или span или абзац, где вы хотите отобразить счетчик, а во второй строке ul, содержащая li

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