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

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

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

或者给他们相同的类并使用第n个子选择器：

<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();
}

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

解决方法:

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

按顺序考虑您的要点：

>速度它很容易成为最快的方法
>字符串操作无
>索引从0开始
>样式您可以根据父样式设置样式,也可以选择将其他类添加到列表项本身
>可移植性可以通过getElementById和childNodes轻松实现

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

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

标签：html,javascript,jquery,css-selectors,jquery-selectors
来源： https://codeday.me/bug/20190901/1783447.html