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属性从box中获取特定元素的最佳方法是什么？

谢谢！

Answer 1

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

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

Answer 2

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

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

或者，您甚至不必循环框。您可以匹配具有rel属性的每个框的第一个子项，如下所示：

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

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

2 个答案: