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

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

returns 一个漂亮、整洁的控制台：<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/）。

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

Answer 2

您需要获取元素 $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>

Answer 3

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

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

或

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

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

Using jQuery .append on individual elements in an object

html

javascript

jquery

dom

javascript-objects