Ottenere elementi

In una pagina web si trova il seguente codice:

Codice HTML:

---

<span id="label_001">testo</span>
<span id="label_002">testo</span>
<span id="label_005">testo</span>
<span id="altro_006">testo</span>

---

E, tramite JS (puro, niente JQuery), devo ottenere i valori legati a "label_" separati da un separatore, ad esempio la virgola.
Quindi otterrei "001,002,005,". Non mi servono funzioni per eliminare la virgola finale, può starci.
Vi ringrazio. :=D:

Quindi lo script cosa dovrebbe andare a cercare? Tutti gli elementi con id che comincia con label_? Questi elementi devono essere tutti span? Sono per caso tutti figli diretti del medesimo elemento?

Citazione:

---

Originalmente inviato da karl94

Deve cercare tutti gli elementi con id che comincia con label_?

---

No, deve cercare il numero che segue l'elemento che inizia con label_.
Al massimo potrei trovare il nome di tutti gli elementi e alla fine eliminare tutti i label_.

Citazione:

---

Originalmente inviato da karl94

Questi elementi devono essere tutti span?

---

Sì

Citazione:

---

Originalmente inviato da karl94

Sono per caso tutti figli diretti del medesimo elemento?

---

No, gli elementi sono figli di un elemento ma non diretti.

Usando il metodo getElementsByTagName sul nodo che contiene gli elementi che ti interessano (può anche essere il nodo documento) puoi ottenere la lista degli span, poi è sufficiente iterare i suoi valori verificando per ciascuno di questi se l'attributo id comincia per label_, in tal caso estraendo il resto dell'id e conservandolo appositamente è possibile creare la stringa da te descritta.

Codice:

---

function insertNameHere(containerNode){
        var elements = containerNode.getElementsByTagName("span");
        var ids = [];
        for(var i = 0; i < elements.length; i++){
                if(elements[i].id.indexOf("label_") == 0){
                        ids.push(elements[i].id.substr(6));
                }
        }
        return ids.toString();
}

---

P.s.: quando un figlio non è diretto, solitamente viene detto discendente.

Anzi, volendo puoi usare anche il metodo querySelectorAll, che restituisce tutti gli elementi indicati da un dato selettore CSS. Nel tuo caso il selettore sarebbe span[id^=lable_], e il resto dello script non dovrebbe far altro che estrarre la porzione dell'id desiderata.

Codice:

---

function insertNameHere(containerNode){
        return Array.prototype.map.call(containerNode.querySelectorAll("span[id^=label_]"), function(e){
                return e.id.substr(6);
        }).toString();
}

---

Ok, ma c'è un problema: tutti i valori dell'array tranne il primo hanno il prefisso "text_".

A quale array ti riferisci? Quello contenuto nella variabile ids? Se è così, allora gli attributi id dei vari elementi non sono solo della forma label_???. Spiega in dettaglio la situazione.

Epic fail.
Nel documento si trovano elementi sia con id "label_ID" che con id "label_text_ID".
Fortunatamente per ogni "label_" c'è il corrispondente "label_text_", quindi mi basta sostituire il prefisso e il valore substr.

A scopo informativo/didattico mi potresti dire:
- cosa significa if(elements[ i].id.indexOf("label_") == 0){ e perché deve essere uguale a zero/nullo/non settato?
- se avessi dovuto prendere in considerazione "label_" sapendo che ci sono anche "label_text_", come mi sarei dovuto comportare?
Ti ringrazio.

Citazione:

---

Originalmente inviato da radiodelmomento

- cosa significa if(elements[ i].id.indexOf("label_") == 0){ e perché deve essere uguale a zero/nullo/non settato?

---

Dunque, il quello script la variabile elements contiene la lista degli elementi span contenuti in un dato nodo, quindi è necessari andare a prendere solo quelli che hanno id che comincia con la data stringa.
elements[i].id è una normale stringa JavaScript, il metodo indexOf cerca nella stringa su cui viene richiamato la prima occorrenza della stringa fornita per parametro, e restituisce un numero rappresentante la posizione in cui ha trovato la seconda stringa nella prima, o meno uno se non è stata trovata la corrispondenza. In questo caso la condizione serve a verificare che l'attributo id dell'elemento cominci proprio per label_.

Citazione:

---

Originalmente inviato da radiodelmomento

- se avessi dovuto prendere in considerazione "label_" sapendo che ci sono anche "label_text_", come mi sarei dovuto comportare?
Ti ringrazio.

---

Io avrei aggiunto un if, sempre all'interno del for, che verificasse la medesima condizione ma per la stringa label_text_, nel corpo di questo poi avrei usato la medesima istruzione cambiando opportunamente il valore passato al metodo substr, l'altro if poi l'avrei incluso nell'else di quello appena aggiunto. In codice:

Codice:

---

function insertNameHere(containerNode){
        var elements = containerNode.getElementsByTagName("span");
        var ids = [];
        for(var i = 0; i < elements.length; i++){
                if(elements[i].id.indexOf("label_text_") == 0){
                        ids.push(elements[i].id.substr(11));
                }else if(elements[i].id.indexOf("label_") == 0){
                        ids.push(elements[i].id.substr(6));
                }
        }
        return ids.toString();
}

---

Non è però incluso un controllo per eventuali doppioni.

Perfetto, grazie mille :wink: