jquery - jQuery: リストの要素数と要素の総数

Question

次のコードを見てみましょう。

<ul>
  <li>What is jQuery?</li>
  <li>What is HTML?</li>
  <li>What is CSS</li>
</ul>

私ができるようにしたいのは、各質問の後に（別のdivに）この種のテキストを追加することです：質問1/3、質問2/3、質問3/3 ...

length()一致した要素の総数を計算して、「/」の後に続く数字「3」を計算することは知っていますが、現在の質問の数字を表示するにはどうすればよいですか? 私はそれが何かに関連していることを知っていindex()ますが、これを行う方法がわかりません。

ありがとうございました！

Answer 1

私はお勧めします：

var size = $('li').length;
$('li').each(function(i){
    $('<div />', {'text' : 'Question ' + (i+1) + '/' + size}).appendTo(this);
});

JS フィドルのデモ。

Answer 2

デモ: http://jsfiddle.net/tGLQk/1

使用するeach

html

<ul>
  <li>What is jQuery?</li>
  <li>What is HTML?</li>
  <li>What is CSS</li>
</ul>

js

var count = $("ul li").length;
$("ul li").each(function(key,val){
 this.innerHTML += " " + (key+1) + "/"+count;
});

Answer 3

正しい順序になる保証はありませんが.each、CSSを使用してこれを行うことができます。例については、このフィドルを参照してください：http: //jsfiddle.net/NCzsG/

（複数のリストがある場合は、を使用して、それぞれのリストでこれを実行.eachするたびに反復処理する必要があることに注意してください）ulli