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

How to get a specific element from a jQuery object by its attribute value?

本文关键字：获取 元素 对象 jQuery 何通过 属性      更新时间：2023-09-26

我有一个有几个元素的网站，像这样:

<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中获取特定元素的最佳方法是什么?

谢谢!

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

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

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

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

或者，您甚至不必遍历这些框。您可以像这样匹配具有rel属性的每个框的第一个子框:

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