У меня есть элемент div в документе HTML.Как получить все элементы внутри «div», которые начинаются с известного текста
Я хотел бы извлечь все элементы внутри этого div с атрибутами id, начинающимися с известной строки (например, «q17_»).
Как я могу достичь этого с использованием JavaScript?
При необходимости для простоты я могу предположить, что все элементы внутри div имеют тип input или 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]);
}
}
}
Еще раз, я настоятельно рекомендую JQuery для таких задач:
$("#myDiv :input").hide(); // :input matches all input elements, including selects
В будущем я, вероятно, поеду с jQuery, но теперь мне нужно сделать это с помощью JavaScript. Проблема с вашим кодом в том, что «дети» являются только сыновьями myDiv. В моем случае входные данные и выборки могут быть глубоко внутри div, а не непосредственными сыновьями. –
@ misha-moroshko - теперь, когда мы говорим * рекурсия * I * stronglier * предлагаю использовать jQuery, как указано выше. :) – karim79
:) Так что вы говорите, что я должен написать рекурсивную функцию, если я хочу сделать это в JavaScript? Никаких альтернатив в JavaScript? –
Вариант 1: Вероятно, самый быстрый (но не поддерживается some browsers при использовании на документе или SVGElement):
var elements = document.getElementById('parentContainer').children;
Вариант 2: Вероятно замедляется т:
var elements = document.getElementById('parentContainer').getElementsByTagName('*');
Вариант 3: Требует изменения кода (обернуть форму вместо DIV вокруг него):
// 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]);
Опять же, мне нужно собрать все элементы внутри дерева, а не только сыновья. –
, предполагающих каждую новую ветвь в дереве является ДИВ, у меня есть реализовано это решение с 2-мя функциями:
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;
}
Теперь предполагая, идентификатор вашего Div является «myDiv», все, что вам нужно сделать, это создать элемент массива и установите его значение в го e Возврат функции:
var ElementsInsideMyDiv = new Array();
ElementsInsideMyDiv = selectAllElementsInsideDiv('myDiv')
Я тестировал его, и это сработало для меня. Надеюсь, это поможет вам.
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
}
});
Я испытал образец, и я хотел бы поделиться этим образцом, и я уверен, что это вполне помогает. Я сделал всю вещь в теле, сначала создав структуру там, нажав кнопку, вы вызовете функцию selectallement(); ; на клике мыши, который передаст идентификатор этого div, о котором вы хотите узнать о детях. Я дал предупреждения здесь на разных уровнях, поэтому вы можете проверить, где r u теперь в кодировке.
<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
С современными браузерами, это легко без JQuery:
document.getElementById('yourParentDiv').querySelectorAll('[id^="q17_"]');
querySelectorAll занимает селектор (в соответствии с CSS селекторов) и использует его для поиска детей элемента в «yourParentDiv» рекурсивно. Селектор использует ^=, что означает «начинается с».
Обратите внимание, что все версии браузеров, выпущенных с июня 2009 года, поддерживают это.
Возможный дубликат http://stackoverflow.com/questions/2617480/how-to-get-all-elements-which-name-starts-with-some-string – graphicdivine
Я хотел бы знать, как достичь этого в JavaScript. –
Я думал, что это другой вопрос, поэтому я открыл новую тему. document.getElementsByTagName ("div") вернет все div в документе. Мне это не нужно. У меня уже есть div в переменной. Мне нужно найти внутри этого div все элементы, id которых начинается с «q17_», например. –