如何将子标签添加到 javascript 数组

Question

我正在尝试用 div 的所有直接子元素填充数组。 示例：

<div>
    <span></span>
    <a></a>
</div>

应该生成一个包含span 和a 的数组

我将如何实现这一目标？

我尝试了var elements = $('.thediv').children();，但这似乎不起作用。

然后我将如何将这些信息用于这种功能？：

$("element1","element2","element3") 取决于数组的结果？

非常感谢您的帮助！我对这件事有点迷茫

注意：我正在使用 zepto.js，它的语法与 jquery 相似，但缺少很多功能，因此这可能是个问题，但我也对使用 jquery 语法的解决方案感到满意，因为它应该可以很好地工作:) @ 987654321@

Answer 1

要将标签放入数组中，您可以轻松地使用jQuery（虽然我不熟悉zepto）：

var elementsArray = [];

$('div').children().each(
    function(i){
        elementsArray.push(this.tagName.toLowerCase());
    });

JS Fiddle demo.

要使用它们，您可以尝试：

for(i=0;i<elementsArray.length;i++){
    $('div').find(elementsArray[i]).css('color','red');
}

JS Fiddle demo.

虽然这只是简单地使用每个元素的tagName，所以如果在相关元素所有元素中存在多个a匹配选择器，在这种情况下实际上是$('div').find('a')，将成为选择器的目标。

上述警告似乎通过使用更复杂的选择器和行为而被打折扣，并允许每个元素一次迭代一个，尽管我不禁觉得它比它更复杂一点需要：

var elementsArray = [];

$('div').children().each(
    function(i){
        elementsArray.push(this.tagName.toLowerCase());
    });

for(i=0;i<elementsArray.length;i++){
    $('div')
        .find(elementsArray[i])
        .not('.edited')
        .eq(0).css('color','red')
        .addClass('edited');
}

JS Fiddle demo.

叹息，我是个白痴。其最终迭代如下，这在一定程度上降低了复杂性，并允许根据每个元素在数组中的位置对其进行适当的迭代：

var elementsArray = [];

$('div').children().each(
    function(i){
        elementsArray.push(this.tagName.toLowerCase());
    });

for(i=0;i<elementsArray.length;i++){
    $('div')
        .children()
        .eq(i)
        .css('color','red');
}

JS Fiddle demo.

话虽如此，但如果您想“定位其中的所有元素”，为什么不简单地通过以下方式定位这些元素：

$('div').children();

它将选择和定位div 元素的每个直接子元素，而无需先将它们保存在用户创建的数组变量中，也不必将它们保存在用户创建的数组变量中。

Answer 2

$("div").children().toArray();

http://api.jquery.com/toArray/

$("element1","element2","element3")

这是否意味着您想将数组用作 jQuery 选择器？或者你真的想要标签名称？

Answer 3

每个 DOM 节点都有一个 childNodes 属性，这是一个 NodeList 包含相关节点的所有直接后代。