jQuery: value.attr est pas une fonction

Question

Je cette snipped dans ma 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')); 
    }); 
}); 

Et quand il est exécuté, je reçois:

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

ce que je fais mal ici? J'essaie d'obtenir la valeur de l'élément div.cat_id.

Answer 1

Le contenu de cet objet jQuery sont des éléments DOM simples, qui ne répondent pas aux méthodes jQuery (par exemple .attr). Vous devez envelopper la valeur par $() pour la transformer en un objet jQuery pour l'utiliser.

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

ou tout simplement utiliser la méthode DOM directement

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

Answer 2

Vous avez affaire à l'élément DOM brut .. besoin de l'envelopper dans un objet jquery

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

Answer 3

Le deuxième paramètre de la fonction de callback passée à each() contiendra l'élément DOM réel et non un objet encapsuleur jQuery. Vous pouvez appeler la méthode getAttribute() de l'élément:

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

Ou envelopper l'élément dans un même objet 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')); 
    }); 
}); 

Ou simplement utiliser $(this):

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