Question

在创建有序的元素列表时，我可以考虑通过索引访问一个元素的三种合理方法：

给它一个唯一的id，最后带一个数字并使用字符串操作：

<ol>
 <li id="item-0"></li>
 <li id="item-1"></li>
 <li id="item-2"></li>
</ol>

...

for(var i = 0; i < 3; i++) {
   $('#item-' + i).doWhatever();
}

为他们提供相同的课程并使用eq选择器：

<ol>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
</ol>

...

for(var i = 0; i < 3; i++) {
   $('.item').eq(i).doWhatever();
}

或者给他们相同的班级并使用nth-child选择器：

<ol>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
</ol>

...

for(var i = 1; i <= 3; i++) {
   $('.item:nth-child(' + i + ')').doWhatever();
}

每种优缺点有哪些？还有其他更好的方法吗？

Answer 1

我想到了一些不同之处：

速度：（至少在Chrome上）根据这些测试用例，第一个速度大约是其他速度的两倍：http://jsperf.com/item1-vs-item-eq-1
字符串操作：第二个是唯一不需要它的字符串
从0或1开始索引：第三个索引是从1开始而不是0，这可能会导致问题，具体取决于您构建/访问HTML的方式
样式：如果您想要类似地设置所有元素的样式，则第二个和第三个不需要任何其他类
可移植性如果您必须更改框架，第一个和第三个可能更具可移植性，因为它们使用标准CSS选择器

Answer 2

我在您的性能测试中添加了第四个测试用例：http://jsperf.com/item1-vs-item-eq-1/2

按顺序考虑你的要点：

速度这是最快的方法
字符串操作无
索引从0开始
样式您可以根据父级设置样式，也可以选择将其他类添加到列表项目中
可移植性这可以通过getElementById和childNodes

我认为要考虑的主要问题是，当您在列表中进行迭代时，所有方法都涉及重复查询DOM。如果你只访问一个单独的元素，这不是什么大问题，但是如果你要在整个列表中工作，那么只做一个查询就会在性能方面产生很大的不同。

编辑出于好奇，我updated my case again根本不使用jQuery来查找列表，而只是使用我上面提到的准系统DOM API。
即使Sandor在指出我的愚蠢错误后做出的改变，也会产生明显的性能影响。考虑到这一点，我会说它主要归结为您的特定用例以及您如何权衡速度与多功能性以查找列表项。

在元素列表中，将编号索引放在ids中或使用索引选择器？

2 个答案: