标签：html javascript jquery css-selectors jquery-selectors

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

给它一个唯一的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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。