javascript - 如何通过 jQuery 对象的属性值获取特定元素？

Question

我有一个包含以下几个元素的网站:

<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>

在我的代码中，我想在循环中更改这些元素的一些属性。我一开始所做的是这样的(它对我来说效果很好):

for(var i = 0, l = relValList.length; i < l; i+=1){
    $(".box[rel=" + relValList[i] + "]").children().first().attr("fill","#000000");
}

现在我读了一篇 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 ????
}

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

谢谢!

Answer 1

您可以使用filter方法，它迭代所选元素并返回匹配的元素。 filter 方法比链式字符串选择器快得多。

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