Ho un elemento div in un documento HTML.Come ottenere tutti gli elementi all'interno di "div" che inizia con un testo noto
Vorrei estrarre tutti gli elementi all'interno di questo div con gli attributi id che iniziano con una stringa nota (ad esempio "q17_").
Come posso ottenere questo utilizzando JavaScript?
Se necessario, per semplicità, posso supporre che tutti gli elementi all'interno di div siano di tipo input o select.
var matches = [];
var searchEles = document.getElementById("myDiv").children;
for(var i = 0; i < searchEles.length; i++) {
if(searchEles[i].tagName == 'SELECT' || searchEles.tagName == 'INPUT') {
if(searchEles[i].id.indexOf('q1_') == 0) {
matches.push(searchEles[i]);
}
}
}
Ancora una volta, ho fortemente suggerisco jQuery per questi compiti:
$("#myDiv :input").hide(); // :input matches all input elements, including selects
Probabilmente andrei con jQuery in futuro, ma ora ho bisogno di farlo con JavaScript. Il problema con il tuo codice è che i "bambini" sono solo i figli di myDiv. Nel mio caso, input e selezioni possono essere profondi all'interno del div piuttosto che figli immediati. –
@ misha-moroshko - ora che stiamo parlando * ricorsione * I * più forte * suggerisco di usare jQuery, come sopra. :) – karim79
:) Quindi quello che dici è che devo scrivere una funzione ricorsiva se voglio farlo in JavaScript? Nessuna alternativa in JavaScript ?? –
Opzione 1: Probabilmente più veloce (ma non supportata da some browsers se usato su documento o SVGElement):
var elements = document.getElementById('parentContainer').children;
Opzione 2: Possibile rallentamento t:
var elements = document.getElementById('parentContainer').getElementsByTagName('*');
Opzione 3: richiede un cambiamento di codice (avvolgere una forma al posto di un div intorno ad esso):
// Since what you're doing looks like it should be in a form...
var elements = document.forms['parentContainer'].elements;
var matches = [];
for (var i = 0; i < elements.length; i++)
if (elements[i].value.indexOf('q17_') == 0)
matches.push(elements[i]);
Ancora una volta, ho bisogno di raccogliere tutti gli elementi nel profondo dell'albero, non solo i figli. –
Presumendo ogni nuovo ramo nell'albero è un div, ho implementato questa soluzione con 2 funzioni:
function fillArray(vector1,vector2){
for (var i = 0; i < vector1.length; i++){
if (vector1[i].id.indexOf('q17_') == 0)
vector2.push(vector1[i]);
if(vector1[i].tagName == 'DIV')
fillArray (document.getElementById(vector1[i].id).children,vector2);
}
}
function selectAllElementsInsideDiv(divId){
var matches = new Array();
var searchEles = document.getElementById(divId).children;
fillArray(searchEles,matches);
return matches;
}
Ora presumendo l'identificativo del tuo div è 'myDiv', tutto quello che dovete fare è creare un elemento di matrice e impostare il suo valore a th e funzione di ritorno:
var ElementsInsideMyDiv = new Array();
ElementsInsideMyDiv = selectAllElementsInsideDiv('myDiv')
L'ho provato e ha funzionato per me. Spero che ti aiuti.
var $list = $('#divname input[id^="q17_"]'); // get all input controls with id q17_
// once you have $list you can do whatever you want
var ControlCnt = $list.length;
// Now loop through list of controls
$list.each(function() {
var id = $(this).prop("id"); // get id
var cbx = '';
if ($(this).is(':checkbox') || $(this).is(':radio')) {
// Need to see if this control is checked
}
else {
// Nope, not a checked control - so do something else
}
});
ho testato un esempio e vorrei condividere questo esempio e sono sicuro che è abbastanza completo. Ho fatto tutto in corpo, creando dapprima una struttura con un clic del pulsante chiamerai la funzione selectallelement(); al clic del mouse che passerà l'id di quel div di cui si desidera conoscere i bambini. Ho dato degli avvisi qui a diversi livelli in modo da poter testare dove sei ora nella codifica.
<body>
<h1>javascript to count the number of children of given child</h1>
<div id="count">
<span>a</span>
<span>s</span>
<span>d</span>
<span>ff</span>
<div>fsds</div>
<p>fffff</p>
</div>
<button type="button" onclick="selectallelement('count')">click</button>
<p>total element no.</p>
<p id="sho">here</p>
<script>
function selectallelement(divid)
{
alert(divid);
var ele = document.getElementById(divid).children;
var match = new Array();
var i = fillArray(ele,match);
alert(i);
document.getElementById('sho').innerHTML = i;
}
function fillArray(e1,a1)
{
alert("we are here");
for(var i =0;i<e1.length;i++)
{
if(e1[i].id.indexOf('count') == 0)
a1.push(e1[i]);
}
return i;
}
</script>
</body>
USE THIS I AM SURE U WILL GET YOUR ANSWER ...THANKS
Con i browser moderni, questo è facile senza jQuery:
document.getElementById('yourParentDiv').querySelectorAll('[id^="q17_"]');
Il querySelectorAll prende un selettore (come per i selettori CSS) e lo usa per cercare i bambini di elemento del 'yourParentDiv' in modo ricorsivo. Il selettore utilizza ^= che significa "inizia con".
Nota che tutti i browser rilasciati da giugno 2009 supportano questo.
Possibile duplicato di http://stackoverflow.com/questions/2617480/how-to-get-all-elements-which-name-start-with-some-string – graphicdivine
Mi piacerebbe sapere come ottenere questo in JavaScript. –
Ho pensato che questa fosse una domanda diversa, ecco perché ho aperto una nuova discussione. document.getElementsByTagName ("div") restituirà tutti i div nel documento. Non ho bisogno di questo. Ho già il div in una variabile. Ho bisogno di trovare all'interno di questo div tutti gli elementi che id inizia con "q17_" per esempio. –