如何遍历所有div并获取特定属性？

Question

我正在尝试做的是迭代包含在父容器中的div集合。 我的结构如下：

<div id='main'>
   <div data-id='2'>
  </div>
  <div data-id='3'>
  </div>
</div>

我的目标是获取每个div的字段data-id并创建一个数组集合。 以前我用select在哪里获取每个可用选项的值，如下所示：

var available_services = $('#selected-service').find('option', this).map(function ()
{
      return this.value;
}).get();

但现在我正在使用div集合而不是select。 我如何遍历所有可用的div ？

Answer 1

这应该返回列表中的所有data-id值：

var available_services = $('#main').find('div').map(function (item)
{
    return item.attr('data-id');
});

我没有测试这个，但我认为应该做这个工作。 （也许你需要调整一下）

Answer 2

我相信这样做会：

var available_services = [];
$('#main div').each(function(){
available_services.push($(this).data( "id" ));
})

Answer 3

这是一个简单的方法：

 $(document).ready(function() {
    var myCollection = [];
     $('#main div').each(function(){
         var dataDiv = $(this).attr('data-id');
         myCollection.push(dataDiv)
     })

 });

Answer 4

尝试这个：

 (function(){ var main = $("#main"); var divs = $(main).find("div"); var arrId = divs.map(function(index, div){ return $(div).attr("data-id"); }); console.log(arrId); })() 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id='main'> <div data-id='2'> </div> <div data-id='3'> </div> </div>