Question

我在HTML文档中有一个div元素。

我想提取此div内的所有元素，其中id属性以已知字符串开头（例如“q17 _”）。

如何使用JavaScript 实现？

如果需要，为简单起见，我可以假设div中的所有元素都属于input或select类型。

Answer 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

Answer 2

选项1：可能最快（但some browsers不支持，如果在Document或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]);

Answer 3

假设树中的每个新分支都是div，我已经用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的id是'myDiv'，你所要做的就是创建一个数组元素并将其值设置为函数的返回值：

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

我测试了它，它对我有用。我希望它可以帮助你。

Answer 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
    }

});

Answer 5

我测试了一个样本，我想分享这个样本，我相信它非常有用。我已经完成了所有的事情，首先在点击你将调用的按钮创建一个结构 function selectallelement（）;在鼠标点击上，它将传递你想知道孩子们的div的id。我已在不同级别发出警报，因此您可以测试编码中的现状。

    <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

Answer 6

使用现代浏览器，没有jQuery就可以轻松实现：

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

querySelectorAll采用一个选择器（根据CSS选择器）并使用它以递归方式搜索“yourParentDiv”元素的子元素。选择器使用^=，意思是“以...开头”。

请注意，自2009年6月以来发布的所有浏览器都支持此功能。

如何获取以“已知文本”开头的“div”中的所有元素

6 个答案: