jQuery: value.attr is not a function

JavascriptJquery

Javascript Problem Overview

I have this snipped in my page:

$('#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'));
    });
});

And when it is executed, I get:

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'));

What am I doing wrong here? I am trying to get the value of the div.cat_id element.

Javascript Solutions

Solution 1 - Javascript

Contents of that jQuery object are plain DOM elements, which doesn't respond to jQuery methods (e.g. .attr). You need to wrap the value by $() to turn it into a jQuery object to use it.

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

or just use the DOM method directly

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

Solution 2 - Javascript

You are dealing with the raw DOM element .. need to wrap it in a jquery object

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

Solution 3 - Javascript

The second parameter of the callback function passed to each() will contain the actual DOM element and not a jQuery wrapper object. You can call the getAttribute() method of the element:

$('#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'));
    });
});

Or wrap the element in a jQuery object yourself:

$('#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'));
    });
});

Or simply use $(this):

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

Solution 4 - Javascript

You can also use jQuery('.class-name').attr("href"), in my case it works better.

Here more information: https://stackoverflow.com/questions/16884072/jquery-instead-of

Categories
Recommended Javascript Solutions
Recommended Jquery Solutions

Previous Solution:

How do I find the size of a 2D array?

C#.NetArraysMultidimensional Array

Next Solution:

mysql too many indexes?

SqlMysqlIndexing

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser290043View Question on Stackoverflow
Solution 1 - JavascriptkennytmView Answer on Stackoverflow
Solution 2 - JavascriptGabriele PetrioliView Answer on Stackoverflow
Solution 3 - JavascriptFrédéric HamidiView Answer on Stackoverflow
Solution 4 - JavascriptEduardoView Answer on Stackoverflow