Зачем вам нужно повторно выбрать элемент JQuery из коллекции?

Question

У меня есть несколько флажков на моей странице, каждый из которых имеет атрибут имени для его полезного значения.

Я хочу получить список значений только для отмеченных предметов. Я могу получить коллекцию элементов, как так ...

var checkedItems = $(".checkbox:checked"); 

Теперь я хочу, чтобы создать список (строка), поэтому я создаю петлю ...

var list = ""; 
for (var i = 0; i < checkedItems.length; i++) { 
    list += $(checkedItems[i]).attr("name") + "\n"; 
} 

Это работает и дает мне, что мой список. Но возникает вопрос, почему я должен применить объект JQuery thingy, т. Е. $(...), чтобы использовать свойство attr?

если я имел следующий вместо этого он не будет работать ...

list += checkedItems[i].attr("name") + "\n"; 

Но, конечно, массив должен быть набор элементов JQuery уже? Зачем переиздавать?

Here is a JSFiddle рабочего примера, если кто-то хочет попробовать это

EDIT: Почему это работает ...

var item = $("#item"); 
var name = item.attr("name"); 

Answer 1

код в ваш вопрос неправильно, потому что

$(checkedItems[i].attr("name")) 

должно быть действительно

$(checkedItems[i]).attr("name") 

---

Кроме того, вы действительно должны сделать это, как этот

var list = ""; 
checkedItems.each(function(){ list += this.name + '\n'; }); 

Demo в http://jsfiddle.net/dGeNR/2/

---

Причина не будет Работа , заключается в том, что при доступе к элементам в объекте jQuery с [] вы возвращаете прямую ссылку на элемент DOM, а не на другой объект jQuery.

Answer 2

Чтобы иметь возможность вызывать функции JQuery, вам нужно обернуть содержимое в $() или jQuery().

Я установил пример на http://jsfiddle.net/dGeNR/1/

Вы должны использовать list += $(checkedItems[i]).attr("name") + "\n";

Answer 3

Ну код список потенциала в вашем вопросе не работает; она должна быть:

for (var i = 0; i < checkedItems.length; i++) 
    list += $(checkedItems[i]).attr("name") + "\n"; // or just checkedItems[i].name 

«.attr()» функция определена только для возвращения значения атрибута для первого элемента в списке соответствующих элементов. Он может был создан для возврата массива (например, функция «.pluck()» в библиотеке Prototype), но это просто не работает.

«.css()« Метод jQuery аналогичен в этом отношении, как и «.val()».

Другой способ сделать то, что вы хотите:

var list = checkedItems.map(function() { 
    return this.name; 
}).get().join('\n'); // thanks SLaks :-) 

Answer 4

checkedItems[i] является сырьевым DOM элемент, а не объект JQuery.
Чтобы получить объект jQuery для данного элемента в наборе, вызовите checkedItems.eq(i).

Вы можете сделать это более красиво, написав

var list = $(".checkbox:checked") 
    .map(function() { return this.name; }) 
    .get() 
    .join('\n'); 

Answer 5

Я полагаю, что вы на самом деле сделать это:

list += $(checkedItems[i]).attr("name") + "\n"; 

checkedItems является выбор JQuery. Он содержит ссылки на содержащиеся в нем элементы.Этими элементами можно управлять с помощью методов jQuery или напрямую обращаться к checkedItems[n], где n - это индекс, основанный на 0.

Эти свойства не являются вариантами jQuery: они являются родными элементами DOM. Если вы хотите использовать метод jQuery, такой как attr, вам нужно создать новый объект jQuery, обернув этот собственный объект.

В этом случае, вы можете избежать этого, используя eq метод, который получает выбор JQuery из оригинального выбора с помощью цифровой клавиши:

list += checkedItems.eq(i).attr('name') + "\n"; 

Еще лучше в вашем случае будет использовать сочетание map и get и Array.prototype.join:

var list = checkedItems.map(function() { 
    return this.name; 
}).get().join('\n');