JQuery: значение .attr не является функцией

У меня есть это на моей странице:

$('#category_sorting_form_save').click(function(){
    var elements = $("#category_sorting_elements > div");
    $.each(elements, function(key, value) {
        console.info(key," : ",value);
        console.info("cat_id: ",value.attr('cat_id'));
    });
});

И когда он выполняется, я получаю:

0 : <div class="dragable" cat_id="6" value="" style="opacity: 1;">    
value.attr is not a function
    console.info("cat_id: ",value.attr('cat_id'));

Что я здесь делаю неправильно? Я пытаюсь получить значение элемента div.cat_id.

Спасибо:)

Эрик

Ответ 1

Содержимое этого объекта jQuery - это простые элементы DOM, которые не отвечают на методы jQuery (например, .attr). Вам нужно обернуть значение $(), чтобы превратить его в объект jQuery, чтобы использовать его.

    console.info("cat_id: ", $(value).attr('cat_id'));

или просто используйте метод DOM напрямую

    console.info("cat_id: ", value.getAttribute('cat_id'));

Ответ 2

Вы имеете дело с сырым элементом DOM.. нужно обернуть его в объект jquery

console.info("cat_id: ",$(value).attr('cat_id'));

Ответ 3

Второй параметр функции обратного вызова, переданный each(), будет содержать фактический элемент DOM, а не объект оболочки jQuery. Вы можете вызвать метод getAttribute() элемента:

$('#category_sorting_form_save').click(function() {
    var elements = $("#category_sorting_elements > div");
    $.each(elements, function(key, value) {
        console.info(key, ": ", value);
        console.info("cat_id: ", value.getAttribute('cat_id'));
    });
});

Или оберните элемент в объект jQuery самостоятельно:

$('#category_sorting_form_save').click(function() {
    var elements = $("#category_sorting_elements > div");
    $.each(elements, function(key, value) {
        console.info(key, ": ", value);
        console.info("cat_id: ", $(value).attr('cat_id'));
    });
});

Или просто используйте $(this):

$('#category_sorting_form_save').click(function() {
    var elements = $("#category_sorting_elements > div");
    $.each(elements, function() {
        console.info("cat_id: ", $(this).attr('cat_id'));
    });
});