Question

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

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

我的目标是获取每个data-id的字段div并创建一个数组集合。以前我使用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>

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

4 个答案: