Creazione di un array con jQuery di ID oggetto da elaborare sul backend Django

Question

Ho qualche javascript che sta creando un Li basato su un oggetto restituito dal backend dopo una ricerca AJAX. L'utente può continuare a cercare i dispositivi e quando selezionato vengono aggiunti alla pagina corrente (come li). Ogni volta che viene creato un nuovo Li, voglio inviare gli id ​​degli oggetti che sono già stati scelti.

Quando i li sono creati, i loro id sono chiamati "device - ###" dove ### è l'ID del dispositivo nel database, quindi ho bisogno di rimuovere quella parte.

Ecco il javascript che mi sta dando problemi:

 var children = $('#temp_inventory').children(); 
     var count = children.length; 
     var devices = []; 
     var i = 0; 
     while (i<=count){ 
      devices[i] = children[i].id.substr(4); 
      i++; 
     }; 

ottengo il seguente errore:

Uncaught TypeError: Object #<HTMLLIElement> has no method 'attr' 

Ho anche provato il modo in cui non jQuery:

devices[i] = children[i].id.substr(4); 

E Finisco con questo errore:

Uncaught TypeError: Cannot read property 'id' of undefined 

Quando lancio in alert(children[i].id.substr(4));, ricevo un avviso con il numero che mi aspetto.

Answer 1

Penso che si può prendere,

while (i<count){ 
    devices[i] = children[i].id.substr(4); 
    i++; 
}; 

altrimenti l'ultima iterazione sarà oltre l'ultimo elemento dell'array.

Un modo più conciso di fare questo usando $.map()

var devices = $.map($('#temp_inventory').children(), function(elem) { 
    return elem.id.substr(4); 
}); 

Answer 2

Parte del problema è probabilmente che il loop utilizza <= invece di <. Ricordare l'ultimo elemento in un elenco che utilizza un indice a base zero è length - 1.

Per creare una matrice di ID, è possibile utilizzare invece il metodo map()^(docs).

var devices = $('#temp_inventory').children().map(function() { 
    return this.id.substr(4); 
}).get(); 

Procedimento .map() popola un oggetto jQuery (che è un oggetto Array-like) con i valori rientro nella funzione.

Quindi il metodo get()^(docs) fornisce una matrice di tali valori anziché un oggetto jQuery.

È anche possibile utilizzare il metodo toArray()^(docs) che fa la stessa cosa.

var devices = $('#temp_inventory').children().map(function() { 
    return this.id.substr(4); 
}).toArray();