Есть ли лучший способ найти один элемент по классу с помощью jQuery?

Question

Я часто обнаруживаю, что строю строку элемента списка или что-то в этом духе, захватывая шаблон, клонируя его, устанавливая его в переменную, и используя find ('. Class'), чтобы найти элементы под ним, а затем присваивая им уникальные идентификаторы ив противном случае работайте с ними, прежде чем добавлять элемент списка к списку, который я делаю.

Например, если у меня есть список элементов, каждый из которых задан из шаблона и включает в себя вложенные элементы, которыеуказанный классом, я бы сделал что-то вроде этого (не проверено, просто пример процесса):

// 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'), чтобы найти поле для добавления идентификатора, он пересекает каждый элементв шаблоне, ищущем этот класс. Это не сильно влияет на производительность, но если это длинный список или длинный шаблон, он сложится.

Есть ли более эффективный способ сделать этоЧто-то лТо есть вы ожидаете от функции с именем .findOnce () ....?

Спасибо!

Answer 1

Это зависит от того, как настроен ваш DOM. Например, children() быстрее find(), точно так же, как parent() быстрее parents().

Пример: $ListItem.children('.field_one')

Answer 2

Вы можете использовать: первый селектор

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

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

Лично я не ставлю $ в качестве префикса для переменных js. Это будет путать с $ из jquery.

просто используйте var ListItem

Answer 3

Я не уверен, что вам вообще нужно присвоить ему идентификатор.Можете ли вы вместо этого обратиться к элементу через $ListItem.find('.field').index(0) или использовать селектор nth-child $ListItem.find('.field:nth-child(1)').