jQuery: value.attr ist keine Funktion

78

Ich habe dies auf meiner Seite ausgeschnitten:

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

Und wenn es ausgeführt wird, bekomme ich:

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

Was mache ich hier falsch? Ich versuche, den Wert des div.cat_id-Elements abzurufen.

João Pimentel Ferreira
quelle

Antworten:

151

Der Inhalt dieses jQuery-Objekts sind einfache DOM-Elemente, die nicht auf jQuery-Methoden reagieren (z .attr. B. ). Sie müssen den Wert umschließen, indem $()Sie ihn in ein jQuery-Objekt umwandeln, um ihn zu verwenden.

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

oder verwenden Sie einfach die DOM-Methode direkt

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

Sie haben es mit dem rohen DOM-Element zu tun. Sie müssen es in ein jquery-Objekt einschließen

console.info("cat_id: ",$(value).attr('cat_id'));
Gabriele Petrioli
quelle
3

Der zweite Parameter der an jedes () übergebenen Rückruffunktion enthält das eigentliche DOM-Element und kein jQuery-Wrapper-Objekt. Sie können die Methode getAttribute () des Elements aufrufen :

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

Oder wickeln Sie das Element selbst in ein jQuery-Objekt ein:

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

Oder verwenden Sie einfach $(this):

$('#category_sorting_form_save').click(function() {
    var elements = $("#category_sorting_elements > div");
    $.each(elements, function() {
        console.info("cat_id: ", $(this).attr('cat_id'));
    });
});
Frédéric Hamidi
quelle
1

Sie können auch verwenden jQuery('.class-name').attr("href"), in meinem Fall funktioniert es besser.

Hier weitere Informationen: "jQuery (...)" anstelle von "$ (...)"

Eduardo
quelle