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 eq() 方法：

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>

您可以通过根据索引设置选择的html()来完全避免循环：

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 2

您可以使用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 3

变量targetElements是一个jQuery对象，或多或少是DOM元素数组的包装器。通过使用数组表示法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节点，然后尝试调用DOM节点上不存在的函数（.html()）。您需要在jQuery对象中重新包装该DOM节点，以便在$(targetElements[j])中恢复所需的功能：

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

（虽然主要用于从文档中选择元素，$()有很多与之相关的功能。请阅读more about it文档。）

更好的是，使用jQuery的集合工具循环遍历jQuery对象，在本例中为each：

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

循环遍历元素集并从不同的数组中添加适当的值

4 个答案: