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 Fiddle demo

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来迭代每个ul上运行此li的每个{{1}}