Durchschleifen Reihe von Elementen und fügen Sie den richtigen Wert aus anderen Array

Question

Ich versuche, eine Reihe von Elementen der gleichen Klasse durchlaufen und einen passenden Wert aus anderen Array hinzufügen, aber etwas ist falsch. Hier ist ein Codebeispiel:

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

Warum erhalte ich einen TypeError?

Answer 1

Sie können jQuery each() verwenden. iterieren durch die Elemente und this, um auf jedes entsprechende jQuery-Objekt/Element abzuzielen. Das Problem ist, dass .html() eine jQuery-Methode ist und Sie versuchen, das auf einem reinen DOM-Element auszuführen.

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

oder

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

Answer 2

Verwenden Sie die jQuery eq() Methode:

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>

---

Sie die Schleife ganz vermeiden, indem Sie die html() der selectio Einstellung n basierend auf seinen Index:

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

Die Variable targetElements ist ein jQuery Objekt, mehr oder weniger ein Wrapper um ein Array von DOM-Elementen. Wenn Sie die Array-Notation targetElements[j] verwenden, erhalten Sie ein Element aus dem Array, aber dieses Element hat keinen jQuery-Wrapper und daher keine jQuery .html()-Methode, daher der Fehler.

Sie können den Artikel wickeln und wieder es ein jQuery-Objekt machen, indem $() um sie setzen, wie folgt aus:

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

Answer 4

in Ihrem Code ist targetElements ein jQuery-Objekt zugewiesen. jQuery-Objekte fungieren als Sammlungen von DOM-Knoten. Die DOM-Knoten selbst verstehen jQuery-Aufrufe nicht, nur das Wrapping-jQuery-Objekt tut dies. Durch die Array-Indizierung greifen Sie direkt auf einen dieser DOM-Knoten zu und versuchen dann, eine Funktion (.html()) aufzurufen, die auf DOM-Knoten nicht existiert. Sie werden feststellen, dass DOM-Knoten in einem jQuery-Objekt neu wickeln müssen, um die Funktionalität, die Sie wie in $(targetElements[j]) wollen zurück:

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

(Während Elemente, um aus einem Dokument in erster Linie verwendet, $() hat eine Menge . jQuery Sammlung Tools Schleife durch das Objekt jQuery gebunden Fähigkeiten, um es lesen more about it der Dokumentation)

Noch besser, verwenden sie in diesem Fall each.

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