Tengo un elemento div en un documento HTML.Cómo obtener todos los elementos dentro de "div" que comienza con un texto conocido
Me gustaría extraer todos los elementos dentro de este div con id atributos comenzando con una cadena conocida (por ejemplo, "q17_").
¿Cómo puedo lograr esto usando JavaScript?
Si es necesario, por simplicidad, puedo suponer que todos los elementos dentro de div son del 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]);
}
}
}
Una vez más, sugieren fuertemente jQuery para estas tareas:
$("#myDiv :input").hide(); // :input matches all input elements, including selects
Probablemente iría con jQuery en el futuro, pero ahora necesito hacerlo con JavaScript. El problema con su código es que los "niños" son solo los hijos de myDiv. En mi caso, las entradas y selecciones pueden ser profundas dentro del div en lugar de hijos inmediatos. –
@ misha-moroshko - ahora que estamos hablando * recursividad * I * stronglier * sugiere el uso de jQuery, como se indicó anteriormente. :) – karim79
:) Entonces, ¿qué dices es que debo escribir una función recursiva si quiero hacer esto en JavaScript? No hay alternativas en JavaScript? –
Opción 1: Probablemente más rápido (pero no el apoyo de some browsers si se utiliza en documentos o SVGElement):
var elements = document.getElementById('parentContainer').children;
Opción 2: Probabilidad disminuya t:
var elements = document.getElementById('parentContainer').getElementsByTagName('*');
Opción 3: requiere un cambio de código (envolver un formulario en lugar de un div alrededor de ella):
// 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]);
De nuevo, necesito recolectar todos los elementos en el interior del árbol, no solo los hijos. –
Suponiendo que cada nueva rama en el árbol es un div, tengo implementado esta solución con 2 funciones:
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;
}
Ahora presumiendo tu ID de div es 'myDiv', todo lo que tiene que hacer es crear un elemento de matriz y establezca su valor a th e return de la función:
var ElementsInsideMyDiv = new Array();
ElementsInsideMyDiv = selectAllElementsInsideDiv('myDiv')
Lo he probado y funcionó para mí. Espero que te ayude.
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
}
});
He probado una muestra y me gustaría compartir esta muestra y estoy seguro de que es bastante útil. He hecho todo en cuerpo, primero creando una estructura allí con un clic de botón llamarás a una función elemento selectal(); con un clic del mouse que pasará el ID de ese div sobre el que desea conocer a los niños. He dado alertas aquí en diferentes niveles para que pueda probar dónde está ahora en la codificación.
<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 los navegadores modernos, esto es fácil y sin jQuery:
document.getElementById('yourParentDiv').querySelectorAll('[id^="q17_"]');
El querySelectorAll lleva un selector (según selectores CSS) y lo utiliza para buscar hijos de elemento 'yourParentDiv' de forma recursiva. El selector usa ^= que significa "comienza con".
Tenga en cuenta que todos los navegadores lanzados desde junio de 2009 admiten esto.
Posible duplicado de http://stackoverflow.com/questions/2617480/how-to-get-all-elements-which-name-starts-with-some-string – graphicdivine
Me gustaría saber cómo lograr esto en JavaScript. –
Pensé que esta es una pregunta diferente, esta es la razón por la que abrí un nuevo hilo. document.getElementsByTagName ("div") devolverá todos los divs en el documento. No necesito esto Ya tengo el div en una variable. Necesito encontrar dentro de este div todos los elementos cuya identificación comienza con "q17_" por ejemplo. –