Как получить все элементы внутри "div", которые начинаются с известного текста

У меня есть элемент div в документе HTML.

Я хотел бы извлечь все элементы внутри этого div с атрибутами id, начиная с известной строки (например, "q17 _" ).

Как я могу достичь этого с помощью JavaScript?

Если необходимо, для простоты я могу предположить, что все элементы внутри div имеют тип input или select.

Ответы

Ответ 1

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

Ответ 2

Вариант 1: Вероятно самый быстрый (но не поддерживается некоторые браузеры, если используется в документе или 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]);

Ответ 3

Предполагая, что каждая новая ветка в вашем дереве является div, я реализовал это решение с помощью двух функций:

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", вам нужно только создать элемент массива и установить его значение для функции return:

var ElementsInsideMyDiv = new Array();
ElementsInsideMyDiv =  selectAllElementsInsideDiv('myDiv')

Я тестировал его, и это сработало для меня. Надеюсь, это поможет вам.

Ответ 4

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
    }

});

Ответ 5

С современными браузерами это легко без jQuery:

document.getElementById('yourParentDiv').querySelectorAll('[id^="q17_"]');

ЗапросSelectorAll принимает селектор (как и селекторы CSS) и использует его для рекурсивного поиска дочерних элементов элемента yourParentDiv. Селектор использует ^=, что означает "начинается с".

Обратите внимание, что все браузеры, выпущенные с июня 2009 года, поддерживают это.

Ответ 6

Я протестировал образец, и я хотел бы поделиться этим образцом, и я уверен, что он вполне помогает. Я сделал все в теле, сначала создав там структуру, нажав кнопку, которую вы назовете функция selectallelement(); на клике мыши, который передаст идентификатор этого 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