javascript。 divのサブセットをループする

Question

私はこのHTMLを持っています（実際にはもっと大きくなります）が、これをサンプルとして使用して私の問題を実証しています。だから私がしたいのは、すべての 'div.col'をループし、その中にあるすべてのdivの 'data-text'が設定されていて、その 'data-text'を配列にプッシュしたいということです。

どうすればいいですか？

<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

このスニペット試してください：あなたは配列を返すmap()とget()を使用することができます

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

を。

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()結果の要素を持っている要素のみを選択することができ、これを達成するために。私は私が私の溶液中で、この `not`セレクタを使用する場合は気にしないことを望む

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>