要素のループスルーと異なる配列から適切な値を追加

Question

私は同じクラスの要素のセットをループし、異なる配列から一致する値を追加しようとしていますが、何かが間違っています。コードサンプルは次のとおりです。

var targetElements = $('.selected'); 
var array1 = ["a", "b", "c"]; 

//this works but it ads the same value 
for(j=0; j < targetElements.length; j++){ 
    targetElements.html(array1[j]);   
} 

//if I try this, it does not work and I get error 
//TypeError: targetElements[j].html is not a function 
for(j=0; j < targetElements.length; j++){ 
    targetElements[j].html(array1[j]);   
} 

なぜTypeErrorが発生しますか？

Answer 1

jQuery each()を使用できます。各要素を反復処理し、thisを使用して、それぞれのjQueryオブジェクト/要素をターゲットにします。問題は.html()がjQueryメソッドであり、純粋なDOM要素でそれを実行しようとしていることです。

targetElements.each(function() { 
    $(this).html(array1[k]); 
}); 

または

for(j=0; j < targetElements.length; j++){ 
    $(targetElements[j]).html(array1[j]);   
} 

Answer 2

のjQueryを使用しeq()方法：あなたがのSelectIOのhtml()を設定することによって、ループを完全に回避することができ

var targetElements = $('.selected'); 
 
var array1 = ["a", "b", "c"]; 
 

 
for(j = 0; j < targetElements.length; j++) { 
 
    targetElements.eq(j).html(array1[j]);   
 
}

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

---

var targetElements = $('.selected'); 
 
var array1 = ["a", "b", "c"]; 
 

 
targetElements.html(function(idx) { 
 
    return array1[idx]; 
 
});

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

Answer 3

変数targetElementsは、DOMエレメントのアレイの周りに多かれ少なかれラッパーjQueryオブジェクトである：nは、そのインデックスに基づい。配列表記targetElements[j]を使用すると、配列から項目を取得できますが、その要素にはjQueryラッパーがないため、jQuery .html()メソッドがないため、エラーになります。

あなたはこのように、アイテムをラップし、その周りに$()を置くことによって、再びjQueryオブジェクト作ることができます：あなたのコードで

for (j = 0; j < targetElements.length; j++) { 
    $(targetElements[j]).html(array1[j]);   
} 

Answer 4

、targetElementsはjQueryオブジェクトが割り当てられます。 jQueryオブジェクトは、DOMノードのコレクションとして機能します。 DOMノード自体はjQuery呼び出しを理解しません。ラッピングjQueryオブジェクトだけが行います。配列を使用することによって、それらのDOMノードの1つに直接アクセスし、次にDOMノードに存在しない関数（.html()）を呼び出そうとしています。あなたはjQueryオブジェクトでDOMノードが$(targetElements[j])のようにしたい機能を取り戻すためにことを再ラップする必要があります：

for(j=0; j < targetElements.length; j++){ 
    $(targetElements[j]).html(array1[j]);   
} 

（主に文書のうちの要素を選択するために使用される一方で、$()はたくさん持っています。それに縛ら機能マニュアルを参照してmore about itを読む）

はさらに良いことに、この場合eachには、jQueryオブジェクトをループにjQueryの収集ツールを使用します。

targetElements.each(function(i, v) { 
    $(v).html(array1[i]); 
});