Question

在这里尝试一些新的东西，我很难理解为什么这不能像我预期的那样工作。

因此，为了简单起见，我已经使用简单的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/

Answer 1

$greenDivs[3]为您提供DOM节点。那些没有任何jQuery特定方法。

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

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

Answer 2

您需要获取元素$greenDivs[3]：

＆＃13;

$(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');

});

＆＃13;

.green {
  background: #00FF00;
}

＆＃13;

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

＆＃13;

Answer 3

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

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

或

 $greenDivs.eq(3).append('....')

使用jQuery .append对象中的各个元素

3 个答案: