граф Ли элементы, которые видны с JQuery

Question

Im считая мои Lī элементы со следующим сценарием 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); 
    }); 

- > Сценарий возвращает:

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

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

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

-> сценарий не возвращается: ничего

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

Answer 1

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

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

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

Answer 2

Прекрасно работает здесь:

http://jsfiddle.net/jtbowden/FrPPr/ (1 видно)

http://jsfiddle.net/jtbowden/FrPPr/1/ (0 видно)

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

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

Вы ошибались «видимый» в вашем действительном коде. (Я делал это раньше)

Answer 3

Он работает так:

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

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

Answer 4

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

Answer 5

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

Answer 6

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

http://jsfiddle.net/bKyt4/

Answer 7

Я попробовал это, и это, кажется, работает то я получаю результат «1».

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

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

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

Answer 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/

Answer 9

В строке один просто определить DIV или интервал или абзац, где вы хотите, чтобы отобразить счетчик, а во второй строке, содержащей литий ул

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