Question

我有这段HTML（实际上有点大）但我用它作为样本来证明我的问题。所以我想要做的是循环所有＆＃39; div.col＆＃39;并且对于每个具有“数据文本”的div而言我想要推动那些数据文本＆＃39;到阵列。

我该怎么做？

<div class="holder">
    <div class="col">
        <div data-text=""></div>
        <div data-text="lorem"></div>
        <div data-text=""></div>
    </div>
    <div class="col">
        <div data-text="hey"></div>
        <div data-text=""></div>
        <div data-text="hello"></div>
    </div>
    <div class="col">
        <div data-text=""></div>
        <div data-text="lorem"></div>
        <div data-text=""></div>
    </div>
</div>

Answer 1

试试这个代码段：

var items = [];

$('div.col div[data-text]').each(function() {
  var text = $(this).data("text");
  
  if (text && text.length > 0) {
    items.push(text);
  }
});

console.log(items);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
    <div class="col">
        <div data-text=""></div>
        <div data-text="lorem"></div>
        <div data-text=""></div>
    </div>
    <div class="col">
        <div data-text="hey"></div>
        <div data-text=""></div>
        <div data-text="hello"></div>
    </div>
    <div class="col">
        <div data-text=""></div>
        <div data-text="lorem"></div>
        <div data-text=""></div>
    </div>
</div>

Answer 2

纯粹的js方法。

＆＃13;

var elems = document.querySelectorAll('.holder .col div[data-text]:not([data-text=""])'),
    res = Array.from(elems).map(v => v.getAttribute('data-text'));

    console.log(res);

＆＃13;

<div class="holder">
    <div class="col">
        <div data-text=""></div>
        <div data-text="lorem"></div>
        <div data-text=""></div>
    </div>
    <div class="col">
        <div data-text="hey"></div>
        <div data-text=""></div>
        <div data-text="hello"></div>
    </div>
    <div class="col">
        <div data-text=""></div>
        <div data-text="lorem"></div>
        <div data-text=""></div>
    </div>
</div>

＆＃13;

Answer 3

您可以使用map()和get()返回数组。

var arr = $('.holder div').map(function() {
  if ($(this).data('text')) return $(this).data('text');
}).get()

console.log(arr)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
  <div class="col">
    <div data-text=""></div>
    <div data-text="lorem"></div>
    <div data-text=""></div>
  </div>
  <div class="col">
    <div data-text="hey"></div>
    <div data-text=""></div>
    <div data-text="hello"></div>
  </div>
  <div class="col">
    <div data-text=""></div>
    <div data-text="lorem"></div>
    <div data-text=""></div>
  </div>
</div>

Answer 4

要实现此目的，您只能选择具有data-text属性的元素，其值为map()，结果元素为数组。试试这个：

＆＃13;

var arr = $('.holder .col div[data-text]:not([data-text=""])').map(function() {
  return $(this).data('text');
}).get();
console.log(arr)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
  <div class="col">
    <div data-text=""></div>
    <div data-text="lorem"></div>
    <div data-text=""></div>
  </div>
  <div class="col">
    <div data-text="hey"></div>
    <div data-text=""></div>
    <div data-text="hello"></div>
  </div>
  <div class="col">
    <div data-text=""></div>
    <div data-text="lorem"></div>
    <div data-text=""></div>
  </div>
</div>

＆＃13;

JavaScript的。循环遍历div的子集

4 个答案: