获取父 div 元素中的子数组值答案

【问题标题】：get child array values in a parent div element获取父 div 元素中的子数组值
【发布时间】：2019-04-16 04:45:34
【问题描述】：

我有一个这样的数组

products = [{id}, {id}, {id}, {id}]

我想将可用的 id 放在父 div 中

<div data-ids="{{ place ids here }}"> <!-- parent div -->
     products.forEach(function(e){
        <div class="product">
            console.log(e.id);
        </div>
     });
</div>

我想把所有可用的 id 放在父 data-ids 中，

有没有什么方法可以在没有额外循环的情况下将其放置在父 div 中？

【问题讨论】：

那么，你想要什么：给定products = [{ id: 1 }, { id: 2}]，输出应该是data-ids="1,2"吗？
是的，这就是我需要的，不需要额外的循环
Join JSON Object member string values together的可能重复
@azeós 不可能重复，因为我需要在没有额外循环的情况下获取它。答案使用 $.map 循环遍历数组
@CaptainAdmin 选择答案用户$.map 函数。这不完全是一个循环。

标签： javascript jquery html arrays

【解决方案1】：

您可以尝试使用map() 和.data()，如下所示：

var products = [{id: 1},{id: 2},{id: 3},{id: 4}];
var ids = products.map(i => i.id).join(',');
$('.product').parents().data('ids',ids);
console.log($('.product').parents().data());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-ids=""> <!-- parent div -->
  Test
  <div class="product">
  </div>
</div>

【讨论】：

【解决方案2】：

var products = [{ id:1 },{ id:2 },{id:3},{id:4}];

    var prod_len=products.length;
    for(let i=0;i<prod_len;i++){
       var div_id=create_html(products[i]['id'])
       $(document).find('.prod_data').append(div_id)
    }

     function create_html(id){
           return `<div data-ids=${id}>
            Product Data ${id}
      		<div class="product">
      		</div>
    	  </div>`
    }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prod_data"></div>

【讨论】：