2

私が達成しようとしているのは、.length を使用してリスト アイテムの数をカウントすることです。これをドキュメントで動作させることはできますが、数を動的に更新することはできません。

クリックされたときにリストにliを追加するボタンがあります（お気に入り）。私がやりたいのは、それが起こったときにliの更新数を取得することです。コードは次のとおりです。

$(document).ready(function () {

  var n = $(".left-5 li").length; // count number of li's
  $(".spandex").text("There are " + n + " li's."); //output number in .spandex

     //this is the part I can't get to work
    $("#refreshme").click(function () { //when refreshme is clicked update number of li's in .spandex 
   $(".spandex").text("There are " + n + " li's.");
  });


});

<div id="refreshme">
    <div id="favbutton-2" class="widget FavButton"> 
        <div class="btn btn-mini">

            <span class='wpfp-span'>
                <a class='wpfp-link' href='?wpfpaction=add&amp;postid=724' title='' rel='nofollow'>
                    <span class="addfav"></span>

                </a>
            </span> 
        </div>

    </div>              
</div>

この構造に問題があるのではないでしょうか？代わりに .addfav をクリックして関数を呼び出してみましたが、サイコロはまだありません。

#refreshme がクリックされたときに何か他のことを完全に実行するように関数を更新しようとしました。この場合、500ms 待ってから .latest をクリックしますが、機能しません。

$(document).ready(function () {

    var n = $(".left-5 li").length; // count number of li's
    $(".spandex").text("There are " + n + " li's."); //output number in .spandex


    $("#refreshme").click(function () { 

      setTimeout(function () {
            $('.latest').click();
        }, 500); 

        /*
        n = $(".left-5 li").length;
        $(".spandex").text("There are " + n + " li's.");
        */

    });
});

#refreshme と .add fav の代わりに wpfp-link のクリックで関数を実行してみました。だから私はそれを変更して.centerのクリックで.lengthが更新され（#refreshmeがクリックされたときに更新を拒否したため）、setTimeoutを渡し、それが機能しました。非常にハッキーです。

答えを更新するだけで、それに出くわした他の人が何か作業できるようになります。

$(document).ready(function () {

    var n = $(".left-5 li").length; // count number of li's
    $(".spandex").text("There are " + n + " li's."); //output number in .spandex


    $(".wpfp-link, .addfav, .removefav").click(function () { 

      setTimeout(function () {
            $('.center').click();
             n = $(".left-5 li").length;
             $(".spandex").text("There are " + n + " li's.");
        }, 500); 





    });
});
4

3 に答える 3

3

をサポートするブラウザを使用していて、getElementsByClassName()要素にクラス名を追加したい場合は、次のように簡単に使用できます。li

var listItems = document.getElementsByClassName('listItem');
$('#refreshme').click(function(){
    $('.spandex').text('There are ' + listItems.length);
});

シンプル、概念実証、デモ.

これは、 がライブ nodeList を返すという事実を利用していdocument.getElementsByClassName()ます (そのため、指定されたクラス名に一致する要素がドキュメントに追加されると、ノードが追加されます)。

document.getElementById()もちろん、上記を次のように組み合わせることで、範囲を狭めることができます。

var listItems = document.getElementById('one').getElementsByClassName('listItem');
$('#refreshme').click(function(){
    $('.spandex').text('There are ' + listItems.length);
});

シンプル、概念実証、デモ.

参考文献:

于 2013-06-16T09:58:36.120 に答える
0

他の人が言ったように、必要に応じて再計算する必要がありnます。ただし、重複したコードを組み合わせて簡単にする必要もあります。

function showCount() {
    var n = $(".left-5 li").length;
    $(".spandex").text("There are " + n + " li's.");
}

$(document).ready(function () {
    showCount();
    $("#refreshme").click( showCount );
});
于 2013-06-16T10:06:34.867 に答える