Javascript 如何通过属性值从jQuery对象中获取特定元素？

我有一个网站，包含以下几个元素：

<g class="box" rel="1">...</g>
<g class="box" rel="2">...</g>
<g class="box" rel="3">...</g>
<g class="box" rel="4">...</g>
<g class="box" rel="5">...</g>

$('.box[rel] :first-child').attr("fill","#000000");

。。。
...
...
...
...

在我的代码中，我想更改循环中这些元素的一些属性。我一开始做的是这样（对我来说很好）：

for（变量i=0，l=relValList.length；i

现在我已经阅读了一篇jQuery最佳实践文章，在这篇文章中我发现了一种叫做缓存的方法来提高性能

所以我试了一下

//call this when page loaded
var boxes = $(".box");

//the good old loop
for(var i = 0, l = relValList.length; i < l; i+=1){
   //here is my problem
   boxes ????
}

//加载页面时调用此函数
变量框=$（“.box”）；
//好老套
对于（变量i=0，l=relValList.length；i

通过rel属性从框中获取特定元素的最佳方法是什么

谢谢

试试看。它将选择器应用于现有jQuery选择

box.filter("[rel=" + relValList[i] + "]").children().first().attr("fill","#000000");

或者，您甚至不必在框上循环。您可以匹配具有

rel

属性的每个框的第一个子项，如下所示：

<g class="box" rel="1">...</g>
<g class="box" rel="2">...</g>
<g class="box" rel="3">...</g>
<g class="box" rel="4">...</g>
<g class="box" rel="5">...</g>

$('.box[rel] :first-child').attr("fill","#000000");

---

您可以使用

filter

方法，它迭代选定的元素并返回匹配的元素<代码>过滤器方法比链式字符串选择器快得多

var $boxes = $(".box"),
    $goldenOnes = $boxes.filter('[rel="golden"]');

---

它是。否则，按类查找会在每次迭代中发生，就像这样，它只发生一次。一次比n次快。谢谢！！这正是我要找的！！工作完美，我得到了更好的性能（在移动Safari、iPad1上测试）。