yếu tố Đếm li có thể nhìn thấy với jQuery

Question

Im đếm yếu tố li của tôi với kịch bản jQuery sau:

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

- > Tập lệnh trả về:

tôi thay đổi style="display: none" tài sản của một số yếu tố li khi $(document).ready với jQuery, như: $('.2').show();

bây giờ tôi muốn thay đổi kịch bản một cách để đếm chỉ những yếu tố li có thể nhìn thấy với kịch bản sau đây: (i chỉ nói thêm: có thể nhìn thấy sau các tài liệu jQuery):

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

-> kịch bản trả về: gì

tôi không có đầu mối tại sao nó không hoạt động o ut - có lẽ ai có bất kỳ mẹo hay ý tưởng nào? Bất kỳ trợ giúp nào cũng được ứng dụng nhiều. Cảm ơn bạn!

Answer 1

làm việc tốt cho tôi

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

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

Answer 2

Hoạt động tốt ở đây:

http://jsfiddle.net/jtbowden/FrPPr/ (1 có thể nhìn thấy)

http://jsfiddle.net/jtbowden/FrPPr/1/ (0 có thể nhìn thấy)

Bây giờ, sử dụng số như tên lớp là bất hợp pháp. (W3C Spec, dấu đầu dòng 2) Tên lớp phải bắt đầu bằng một chữ cái. Có lẽ việc thao tác với điều đó đang gây ra vấn đề?

Ngoài ra, tôi chỉ có thể đoán vấn đề của bạn là ở nơi khác. Bạn đang sử dụng phiên bản mới nhất của jQuery? (Mặc dù trong các thử nghiệm của tôi, nó hoạt động tất cả các cách trở lại 1.3, và sau đó nó không hoạt động ở tất cả)

Bạn đã sai chính tả "có thể nhìn thấy" trong mã thực tế của bạn. (Tôi đã làm điều này trước đó)

Answer 3

Nó hoạt động như thế:

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

Bạn có thể xem ví dụ there làm việc.

Answer 4

Tập lệnh của bạn không trả về gì vì tất cả các DIV đều bị ẩn. Nó trả về 1 khi 1 được hiển thị.

Answer 5

Chỉ cần có một cái nhìn lúc này: http://jsfiddle.net/vnMrQ/

Answer 6

Yep, như mọi người đã nói, nó hoạt động tốt, ngay cả khi bạn.show() các yếu tố doc sẵn sàng:

http://jsfiddle.net/bKyt4/

Answer 7

Tôi đã cố gắng này ra và có vẻ như để làm việc nghĩa là tôi nhận được một kết quả của '1'.

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

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

NB: Tôi không nghĩ rằng có số lượng cho giá trị của một thuộc tính là đánh dấu hợp lệ

Answer 8

Yếu tố giả định là ẩn nếu nó hoặc cha mẹ của nó tiêu thụ không gian trong tài liệu. Khả năng hiển thị CSS không được tính đến.

Xem:

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

Tôi đã thực hiện một jsfiddle cho bạn: http://jsfiddle.net/mgrcic/3BzKT/3/

Answer 9

Phù một chỉ cần xác định một div hoặc span hoặc đoạn mà bạn muốn hiển thị số, và trong dòng thứ hai ul chứa li

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