配列からテキストを取得

Question

特定の順序でボタン要素を持つ配列があります。

var arr = [ $('.buttons')[0], $('.buttons')[2], $('.buttons')[1], $('.buttons')[4] ]; 

各ボタンのテキストを取得するにはどうすればよいですか？以下は私が試みたものです。

$.each(arr, function (index, value) { 
     var butText = value.text(); 
     //do something... 
}); 

Answer 1

ボタンテキストを取得するには、jQueryオブジェクト$(this)を使用する必要があります。

var arr = [$('.buttons')[0], $('.buttons')[2], $('.buttons')[1], $('.buttons')[4]]; 
 

 
$.each(arr, function() { 
 
    var butText = $(this).text(); 
 
    console.log(butText) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="buttons">button 0</button> 
 
<button class="buttons">button 1</button> 
 
<button class="buttons">button 2</button> 
 
<button class="buttons">button 3</button> 
 
<button class="buttons">button 4</button>

Answer 2

あなたが指定した順序でそれらのそれぞれを取得したい場合は、あなただけの繰り返しで各要素を参照するために$(this)を使用して、それらを介してループを検討できます。

// Iterate through each element 
$.each(arr, function(){ 
     // Get the text (this will refer to each of your elements) 
     var buttonText = $(this).text(); 
     // Do something here 
}); 

完了例

var arr = [ $('.buttons')[0], $('.buttons')[2], $('.buttons')[1], $('.buttons')[4] ]; 
 
$.each(arr,function(){ 
 
    alert($(this).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class='buttons'>A</button> 
 
<button class='buttons'>B</button> 
 
<button class='buttons'>C</button> 
 
<button class='buttons'>D</button> 
 
<button class='buttons'>E</button>

Answer 3

あなたは$.each()ループせずに新しい配列にそれらの要素のテキストを抽出したい場合は、使用map()を使用することができます。

[ $('.buttons')[0].text(), $('.buttons')[2].text(), $('.buttons')[1].text(), $('.buttons')[4].text() ] 

に配列同等が返され

var arr = [ $('.buttons')[0], $('.buttons')[2], $('.buttons')[1], $('.buttons')[4] ]; 
var texts = arr.map(function(a) {return a.text();});