有没有更好的方法使用jQuery按类查找单个元素?

Is there a better way to find a single element by class with jQuery?

提问人:Eli 提问时间:7/30/2011 最后编辑:Eli 更新时间:7/30/2011 访问量:84

问:

我经常发现自己通过抓取模板、克隆它、将其设置为变量并使用 find('.class') 在其下查找元素,然后为它们分配唯一 ID 并在将列表项附加到我正在做的任何列表之前使用它们来构建列表项行或其他东西。

例如,如果我有一个项目列表,所有这些项目都是从模板设置的,并且包括由类指定的子项目,我会做这样的事情(未测试,只是一个过程示例):

// Create my list item.
$ListItem = $('#list_item_template').clone();

// Set the id for the first field so I can work with it directly later.
$ListItem.find('.field_one).attr('id', 'field_one_'+ListItemID).val('field one value for this list item');

// Set the id for the second field so I can work with it directly later.
$ListItem.find('.field_two).attr('id', 'field_two_'+ListItemID).val('field two value for this list item');

// Add the item to the list
$ListItem.appendTo($List);

现在,我可以访问第 X 个列表项的第一个“字段”,例如 $('#field_one_[ListItemID]。

问题是,即使我指定了$ListItem,我知道当我使用 find('.field_one') 查找要添加 id 的字段时,它会遍历模板中的每个元素以查找该类。这并不是对性能的影响,但如果它是一个长列表或一个长模板,它就会加起来。

有没有更有效的方法可以做到这一点?就像你对一个名为 .findOnce() 的函数所期望的那样......?

谢谢!

jQuery 性能

评论


答:

2赞 ysrb 7/30/2011 #1

您可以使用 :first 选择器

http://api.jquery.com/first-selector/

$ListItem.find('.field_one:first') ....

就个人而言,我不会将 $ 作为 js 变量的前缀。它会与 jquery 中的 $ 混淆。

只需使用var ListItem

评论

1赞 AlienWebguy 7/30/2011
我不同意 - 我认为将变量命名空间化是有意义的,这样您就知道什么框架依赖于它们。
0赞 Eli 7/30/2011
谢谢!问题 - 我的印象是,只有在找到所有匹配的元素后,才会将 :first、:nth-child、:last 等应用于结果集。我记错了吗?或者,如果选择器是:first,它是否停止在第一个结果?
0赞 Eli 7/30/2011
我将其作为$ListItem(带有 $)的原因是指定它实际上是一个 jQuery 结果,这样它就不会与常规 javascript 变量混淆。
4赞 AlienWebguy 7/30/2011 #2

这取决于你的 DOM 是如何设置的。 比 快,例如,就像 比 快 一样。children()find()parent()parents()

例:$ListItem.children('.field_one')

0赞 DA. 7/30/2011 #3

我不确定您是否需要为其分配 ID。您能否通过或使用第 n 个子项选择器来引用该项目。$ListItem.find('.field').index(0)$ListItem.find('.field:nth-child(1)')

评论

0赞 Eli 7/30/2011
谢谢。ID 实际上基于数据库,因此例如accountnumber_77将是 id = 77 的帐户的数字字段。不能真正按立场来衡量,因为它们可能不按顺序排列。