jQuery: value.attr no es una función

Question

esto he cortado con tijeras en mi página:

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

Y cuando se ejecuta, me sale:

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

¿qué estoy haciendo mal aquí? Estoy tratando de obtener el valor del elemento div.cat_id.

Answer 1

El contenido de ese objeto jQuery son elementos DOM simples, que no responde a los métodos jQuery (por ejemplo, .attr). Debe envolver el valor en $() para convertirlo en un objeto jQuery para usarlo.

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

o simplemente utilizar el método DOM directamente

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

Answer 2

Usted está tratando con el elemento DOM prima .. necesidad de envolverlo en un objeto jQuery

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

Answer 3

El segundo parámetro de la función de devolución de llamada pasada a each() contendrá el elemento DOM real y no un objeto envoltorio jQuery. Usted puede llamar al método getAttribute() del elemento:

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

o envuelva el elemento en un jQuery oponerse a sí mismo:

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

o simplemente utilizar $(this):

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