各要素に固有のテキストを付ける

Question

だから...私はdivを4ページ持っています。これらの4つはすべてclassfoobarに属しています。私がここでやりたいのは、それぞれのJavaScriptに特定のArrayの値を与えることです。私はjQuery 3.2.1を使用しています。

私はJavaScript：

var $elements = jQuery.makeArray($(".foobar")); 
[1,2,3,4].forEach(function (x) { 
    $elements.forEach(function (y) { 
    y.text(x.toString()); 
    }); 
}); 

マイHTML：

<div class="foobar"></div> 
<div class="foobar"></div> 
<div class="foobar"></div> 
<div class="foobar"></div> 

そしていつものように、それは動作しません。基本的にはここで何をしたいのですか？それぞれNumberをArrayとし、text()をそれぞれdivとします。

Answer 1

このフィドルをチェックしてください。 https://jsfiddle.net/bj3s92gr/
Bassicalyでは、クラスfoobarでdivを切り取り、htmlで配列の位置を確認する必要があります。

var $elements = $(".foobar"); 
$arr = [1,2,3,4]; 
$elements.each(function(e){ 
    $(this).html($arr[e]); 
}); 

Answer 2

インナーループ内のすべての要素に同じテキストを設定しています。この

var $elements = $(".foobar"); 
[1,2,3,4].forEach(function (x, i) { 
    $($elements[i]).text(x) 
}); 

または全て.foobar要素を通してトラバース、数値の配列を作成.text(func)

var texts = [1,2,3,4]; 
var $elements = $(".foobar").text(function(i) { 
    return texts[i]; 
}) 

Answer 3

を使用しようとすると、アレイからの値を割り当てます。

var $elements = jQuery.makeArray($(".foobar")); 
 
var numbers = [1, 2, 3, 4]; 
 
var count = 0; 
 
$(".foobar").each(function() { 
 
    $(this).text(numbers[count]); 
 
    count++; 
 
})

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

 
<div class="foobar"></div> 
 
<div class="foobar"></div> 
 
<div class="foobar"></div> 
 
<div class="foobar"></div>