在对象中的单个元素上使用jQuery .append

Using jQuery .append on individual elements in an object

本文关键字：jQuery append 元素 对象 单个      更新时间：2023-09-26

在这里尝试新的东西，我很难理解为什么这没有按我的预期工作。

因此，为了

简单起见，我用一个简单的 for 循环设置了一些元素：

for(var i=0; i<5; i++){
    $('body').append('<div class="green">Here I am</div>');
}

我将所有项目选为对象（我需要单独更改每个项目）：

$greenDivs = $('div.green');

现在，当我想访问它时，我可以使用它的索引在控制台中很好地做到这一点：

console.log($greenDivs[3]);

它返回了一个漂亮、整洁的控制台： <div class="green"> 我也可以在页面上看到选中的控制台。

但是，当我尝试使用某些jQuery函数以任何方式更改它时，我只会收到诸如$greenDivs[3].append is not a function

为什么功能不起作用？是因为.green元素被分类到对象中的方式吗？我可以使用所有基本的JS属性，例如：

$greenDivs[3].innerHTML = "Whatever"

在理解为什么我必须使用基本的 javascript 对象属性来修改单个元素时，任何帮助都值得赞赏。

如果你想要一个例子，请在这里播放：https://jsfiddle.net/eacdtzjw/2/

>$greenDivs[3]给你一个DOM节点。这些没有任何jQuery特定的方法。

要将其保留为 jQuery 对象，请使用 $greenDivs.eq(3)（参见 https://api.jquery.com/eq/）。

您当然可以将其重新包装为 jQuery 对象，例如 $( $greenDivs[3] ) ，但在这种情况下，这是一个不必要的步骤。

你需要

获取元素$greenDivs[3]：

$(function(){
	for(var i=0; i<5; i++){
  	$('body').append('<div class="green">Here I am</div>');
  }
  $greenDivs = $('div.green');
  console.log($greenDivs[3]);
   $($greenDivs[3]).append('Hello');
});
.green {
  background: #00FF00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$greenDivs[3]实际上是一个对象而不是jquery对象。如果你想使用jquery追加函数，你应该 

  $($greeenDivs[3]).append('...');

或

 $greenDivs.eq(3).append('....')
相关文章：