Question

我经常发现自己通过抓取模板，克隆它，将其设置为变量，并使用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（）的函数中得到一些东西......？

谢谢！

Answer 1

这取决于您的DOM设置方式。 children()比find()快，例如parent()比parents()更快。

示例：$ListItem.children('.field_one')

Answer 2

您可以使用：first selector

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

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

就个人而言，我没有把$作为js变量的前缀。它会与来自jquery的$混淆。

只需使用var ListItem

Answer 3

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

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

3 个答案: