Question

我有这个HTML：

    <div class="ac-users ac-appender">
        <div class="chip" data-id="3069243" data-text="">IBM(3069243)
            <i class="material-icons close">close</i>
        </div>
        <div class="chip" data-id="6640418" data-text="">INTC(6640418)
            <i class="material-icons close">close</i>
        </div>
        <div class="chip" data-id="1452690" data-text="">RJF(1452690)
            <i class="material-icons close">close</i>
        </div>
    </div>

我需要从中进行选择并获取data-id的数组。 $（'。chip'）有效地选择芯片数组，但我无法提取data-id（s）的值

使用jquery我使用以下内容但它只返回第一项：

    $('.chip').attr("data-id");

Answer 1

var dataIds = $('.chip').map(function(i, chip) {
  return chip.getAttribute('data-id');
});

Answer 2

var arr = $('.chip').map(function() {

  return $(this).attr('data-id');

}).get();

console.log(arr)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ac-users ac-appender">
  <div class="chip" data-id="3069243" data-text="">IBM(3069243)
    <i class="material-icons close">close</i>
  </div>
  <div class="chip" data-id="6640418" data-text="">INTC(6640418)
    <i class="material-icons close">close</i>
  </div>
  <div class="chip" data-id="1452690" data-text="">RJF(1452690)
    <i class="material-icons close">close</i>
  </div>
</div>

使用.map()

描述：将数组或对象中的所有项目转换为新的项目数组。

Answer 3

这个怎么样：

$(".chip").map(function() { return $(this).data('id') } ).get();

它获取类“chip”的所有元素然后在每个元素上调用一个函数来获取data-id并创建一个格式数组：

[3069243,6640418,1452690]

无法从html中选择数据属性

3 个答案: