3

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

给它一个唯一的 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();
}

各自的优点和缺点是什么？还有其他更好的方法吗？

4

2 回答 2

4

我想到了一些差异：

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

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

按顺序考虑您的观点：

  • 速度这很容易成为所介绍的方法中最快的方法
  • 字符串操作无
  • 索引从 0 开始
  • 样式您可以根据父项设置样式，或者您可以选择将其他类添加到列表项本身
  • 可移植性这本可以很容易地getElementById实现childNodes

我认为要考虑的主要事情是，您的所有方法都涉及在迭代列表时重复查询 DOM。如果您只访问一个元素，那没什么大不了的，但是如果您要处理整个列表，那么只进行一次查询将在性能方面产生很大的不同。

编辑出于好奇，我再次更新了我的案例，根本不使用 jQuery 来定位列表，而是使用上面提到的准系统 DOM API。
即使 Sandor 在指出我的愚蠢错误后做出了更改，也会对性能产生明显影响。考虑到这一点，我想说这主要取决于您的特定用例以及您在定位列表项时如何权衡速度与多功能性。

于 2012-12-12T05:49:23.007 回答