Trova elementi usando parte dell’ID

Ho, il div è dove id appare come this_div_id_NUMBER , tutti i div ha la diversa parte NUMBER . Come trovo tutti i div usando solo questa this_div_id dell’ID?

puoi usare querySelectorAll per ottenere attributi parziali, incluso ID:

 document.querySelectorAll("[id^='this_div_id']") 

il ^ accanto al segno di uguale indica “inizia con”, è ansible utilizzare * invece, ma è sobject a falsi positivi.

vuoi anche assicurarti di usare virgolette (o apos) attorno al valore del comapare nei selettori di attributo per la massima compatibilità su querySelectorAll; nei browser jQuery e sempreverdi non importa, ma in vaniglia per i vecchi browser importa.

MODIFICA: i requisiti più recenti richiedono un selettore più specifico:

 document.querySelectorAll("[id^='this_div_id']:not([id$='_test_field'])"); 

il segmento not () impedisce che qualcosa che termina con “_test_field” dall’abbinamento.


prova di concetto / demo: http://pagedemos.com/partialmatch/

querySelectorAll

querySelectorAll accetta i selettori CSS e restituisce una HTMLNodeList (una sorta di matrice) di tutti gli elementi che corrispondono al selettore css.

Il selettore css ^ (inizia con) può essere usato per il tuo scopo. Scopri di più in questo articolo .

Per il tuo caso, sarebbe document.querySelectorAll("[id^='this_div_id']");

Si noti che querySelectorAll non restituisce un elenco di nodes querySelectorAll . Ciò significa che eventuali modifiche alla dom non verrebbero aggiornate in tempo reale nel valore di ritorno della funzione.

Un altro metodo dovrebbe assegnare tutti gli elementi a una class specifica e quindi è ansible utilizzare getElementsByClassName (che è molto più veloce di querySelector).

 var divs = document.getElementsByClassName("divClass"); 

Utilizzo dei selettori di attributo :

div[id^="this_div_id"]

È meglio usare le classi. Ma c’è una soluzione di cui hai bisogno (supponendo che tu usi jQuery):

 $("*[id^='this_div_id']") 

Basta usare il selettore di attributi come di seguito:
$("[id^='this_div_id_']")

Prova questo selettore:

 [id^="this_div_id_"] 

Pure JavaScript: ( riferimento )

 document.querySelectorAll('[id^="this_div_id_"]') 

jQuery: ( riferimento )

 $('[id^="this_div_id_"]') 

CSS: ( riferimento )

 [id^="this_div_id_"] { /* do your stuff */ } 

Perché funziona?

Con [] nel selettore, è ansible selezionare gli attributi. Usa ‘=’ per trovare esattamente il valore o usa ‘^ =’ per verificare se il valore inizia con. Leggi di più su questo qui.