11

次のjQueryスクリプトを使用してli要素をカウントしています。

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

jQueryを使用style="display: none"する場合、次のように、いくつかのli要素のプロパティを変更します。$(document).ready$('.2').show();

次のスクリプトで、表示されているli要素のみをカウントするようにスクリプトを変更したいと思います（jQueryドキュメントの後に：visibleを追加しました）。

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

->スクリプトは次を返します：何もありません

なぜそれがうまくいかないのか私にはわかりません-多分誰かが何かヒントやアイデアを持っていますか？どんな助けでも大いに感謝されます。よろしくお願いします！

4

9 に答える 9

17

私のためにうまくいく

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

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

于 2012-04-13T06:48:40.070 に答える
8

ここで正常に動作します：

http://jsfiddle.net/jtbowden/FrPPr/（1つ表示）

http://jsfiddle.net/jtbowden/FrPPr/1/（0が表示されます）

現在、クラス名として数字を使用することは違法です。（W3C仕様、箇条書き2）クラス名は文字で始まる必要があります。多分それで操作をすることは問題を引き起こしていますか？

それ以外は、あなたの問題は他の場所にあると推測できます。最新バージョンのjQueryを使用していますか？（私のテストでは、1.3までさかのぼって機能しますが、その後はまったく機能しません）

実際のコードで「表示」のスペルを間違えましたか。（私は以前にこれを行いました）

于 2012-04-13T06:44:41.237 に答える
2

要素またはその親がドキュメント内のスペースを消費しない場合、要素は非表示と見なされます。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/

于 2012-04-13T06:57:09.380 に答える
1

それはそのように機能します：

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

そこに実例を見ることができます。

于 2012-04-13T06:47:33.630 に答える
1

これを見てください：http： //jsfiddle.net/vnMrQ/

于 2012-04-13T06:48:01.873 に答える
1

うん、誰もがすでに言っているように、要素ドキュメントの準備ができている.show（）を使用している場合でも、正常に機能します。

http://jsfiddle.net/bKyt4/

于 2012-04-13T06:48:32.830 に答える
0

すべてのDIVが非表示になっているため、スクリプトは何も返しません。1が表示されると1を返します。

于 2012-04-13T06:47:51.437 に答える
0

これを試してみましたが、うまくいくようです。つまり、「1」の結果が得られます。

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

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

注意：属性の値に数字を付けることは有効なマークアップではないと思います

于 2012-04-13T06:52:35.013 に答える
0

1行目では、カウントを表示するdiv、span、または段落を定義し、2行目では、liを含むulを定義します。

 $('.notify').html(
 $('#ul-notifications li').length);
于 2016-02-01T16:17:35.840 に答える