使用 Javascript 遍历兄弟姐妹的最快方法是什么?
What is the fastest way to iterate through siblings using Javascript?
类似于
for (var k = 0; k < $('#somediv > p').length; ++k)
console.log($('#somediv > p:nth-of-type(' + k.toString() + ')');
不可能高效,因为 p
元素被多次迭代。执行上述操作最有效的方法是什么?
- 将
$('#somediv > p')
存储在一个变量中,而不是在每个循环中重复 selection
- 不要在迭代中使用
:nth-of-type( k )
。一次性 select 所有这些,然后迭代你得到的集合。
总而言之:$('#somediv > p')
确实已经为您提供了您想要的结果。只需使用 jQuery 的惯用语 each
method 遍历它 - 普通的 js 循环会更快,但这可以忽略不计。
$('#somediv > p').each(function() {
console.log($(this));
});
当然,如果您寻求原始速度,则根本不要使用 jQuery。可能类似于
var els = document.getElementById("somediv").children;
for (var i=0, l=els.length; i<l; i++)
if (els[i].tagName == "P")
console.log(els[i]);
尝试
var i = 0, p = document.getElementById("somediv").querySelectorAll("p");
do {
console.log(p[i]);
++i;
} while(i < p.length )
var i = 0, p = document.getElementById("somediv").querySelectorAll("p");
do {
console.log(p[i]);
++i;
} while(i < p.length )
<div id="somediv">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
类似于
for (var k = 0; k < $('#somediv > p').length; ++k)
console.log($('#somediv > p:nth-of-type(' + k.toString() + ')');
不可能高效,因为 p
元素被多次迭代。执行上述操作最有效的方法是什么?
- 将
$('#somediv > p')
存储在一个变量中,而不是在每个循环中重复 selection - 不要在迭代中使用
:nth-of-type( k )
。一次性 select 所有这些,然后迭代你得到的集合。
总而言之:$('#somediv > p')
确实已经为您提供了您想要的结果。只需使用 jQuery 的惯用语 each
method 遍历它 - 普通的 js 循环会更快,但这可以忽略不计。
$('#somediv > p').each(function() {
console.log($(this));
});
当然,如果您寻求原始速度,则根本不要使用 jQuery。可能类似于
var els = document.getElementById("somediv").children;
for (var i=0, l=els.length; i<l; i++)
if (els[i].tagName == "P")
console.log(els[i]);
尝试
var i = 0, p = document.getElementById("somediv").querySelectorAll("p");
do {
console.log(p[i]);
++i;
} while(i < p.length )
var i = 0, p = document.getElementById("somediv").querySelectorAll("p");
do {
console.log(p[i]);
++i;
} while(i < p.length )
<div id="somediv">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>