javascript。循環通過divs子集

Question

我有這片HTML（其實是很大），但我用它作爲示例來演示我的問題。所以我想要做的就是循環遍歷所有的'div.col'，並且對於每一個有'數據文本'的div來說，我想把'數據文本'推到一個數組中。

我該怎麼做？

<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

您可以使用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 3

純JS的辦法。

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);

<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()所得元素添加到數組的元素。試試這個：

var arr = $('.holder .col div[data-text]:not([data-text=""])').map(function() { 
 
    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>