Question

使用以下HTML：

<div id="main">
    <div id="a">
        <a href=# id="a!1">qq</a>
        <a href=# id="a!3">qw</a>
        <a href=# id="a!2">qe</a> 
    </div>
    <div id="b">
        <a href=# id="b!1">qa</a>
        <a href=# id="b!2">qs</a>
        <a href=# id="b!3">qd</a> 
    </div>
    <div id="c">
        <a href=# id="c!1">qz</a>
        <a href=# id="c!2">qx</a>
        <a href=# id="c!3">qc</a>
        <a href=# id="c!4">qv</a> 
    </div>
</div>

我想获得所有ID的列表： a，a！1，a！3，a！2，b，b！1，b！2，b！3，c，c！1，c！2，c！3，c！4

以下代码类型：

 var arr = $("#main > div").map(function() {
     return this.id
 });
 var aa = (arr.get().join(","));
 alert(aa);

但警报只给我“”a，b，c“

有没有更好的方法来实现这一点，我可能会丢失，因此它会横向移动特定容器ID的DOM并传回容器中所有元素的所有子ID？

Answer 1

在JQuery中使用css选择器迭代所有，而不是直接子项：

＆＃13;

$(function(){
    $('#main *').each(function (){
        var id = $(this).attr('id');
        console.log(id);
        $('#main').append("<br /> -"+id);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    <div id="a">
        <a href=# id="a!1">qq</a>
        <a href=# id="a!3">qw</a>
        <a href=# id="a!2">qe</a> 
    </div>
    <div id="b">
        <a href=# id="b!1">qa</a>
        <a href=# id="b!2">qs</a>
        <a href=# id="b!3">qd</a> 
    </div>
    <div id="c">
        <a href=# id="c!1">qz</a>
        <a href=# id="c!2">qx</a>
        <a href=# id="c!3">qc</a>
        <a href=# id="c!4">qv</a> 
    </div>
</div>

＆＃13;

Answer 2

只做

var arr = $("#main > div, #main > div > a").map(function() {
 return this.id
});

您当前的代码会显示#main但不属于a的直接子女的ID

Answer 3

只需添加锚点即可查询：

$("#main div, #main a")

Codepen

Answer 4

var ids = []
$("a").each(function(){
  ids.push($(this).attr("id"))
})

Answer 5

 <div ng-controller="SlambookExt">
     <app-version>1</app-version>
    </div>

请试一试。

遍历DOM并获取ID

5 个答案: