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

【问题标题】：How to get all elements inside "div" that starts with a known text如何获取以已知文本开头的“div”中的所有元素
【发布时间】：2010-04-11 16:00:47
【问题描述】：

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

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

我如何使用 JavaScript 实现这一点？

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

【问题讨论】：

stackoverflow.com/questions/2617480/…的可能重复
我想知道如何在 JavaScript 中实现这一点。
我认为这是一个不同的问题，这就是我打开一个新线程的原因。 document.getElementsByTagName("div") 将返回文档中的所有 div。我不需要这个。我已经在变量中有 div。例如，我需要在这个 div 中找到 id 以“q17_”开头的所有元素。
@misha-moroshki - 你是在谈论以给定值开头的 name 属性吗？
对不起，我说的是“id”属性。

标签： javascript html

【解决方案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

【讨论】：

将来我可能会使用 jQuery，但现在我需要使用 JavaScript。您的代码的问题是“孩子”只是 myDiv 的儿子。在我的例子中，输入和选择可以在 div 的深处，而不是直接的儿子。
@misha-moroshko - 现在我们正在谈论 recursion 我stronglier 建议使用 jQuery，如上所述。 :)
:) 所以你说的是如果我想在 JavaScript 中这样做，我必须编写一个递归函数？ JavaScript 中没有替代品？？
如果您知道标记的样子，就不需要递归 - 因为可以编写特定于您的 DOM 的代码来提取所需的内容。我建议您发布它，以获得更好的响应。
你能解释一下jQuery吗？我也在寻找将所有元素放入数组中。

【解决方案2】：

选项 1： 可能最快（但如果用于 Document 或 SVGElement，则 some browsers 不支持）：

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】：

在现代浏览器中，不用 jQuery 也很容易：

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

querySelectorAll 采用一个选择器（根据 CSS 选择器）并使用它递归地搜索“yourParentDiv”元素的子元素。选择器使用^=，表示“以”开头。

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

【讨论】：

【解决方案4】：

假设你的树中的每个新分支都是一个 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')

我已经对其进行了测试，它对我有用。希望对你有帮助。

【讨论】：

【解决方案5】：

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
    }

});

【讨论】：

【解决方案6】：

我已经测试了一个样本，我想分享这个样本，我相信它很有帮助。我已经完成了正文中的所有事情，首先在单击按钮时创建一个结构，您将调用函数选择元素（）；在鼠标单击时，它将传递您想知道孩子们的那个 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

【讨论】：