javascript - 使用 each() 进行 jQuery DOM 操作；

Question

我正在尝试使用 jQuery 使用 each() 同时对多个元素执行一些简单的 DOM 操作。我得到了我不明白的结果。

这是一个 jsFiddle，它显示了我想要发生的事情与实际发生的事情:

http://jsfiddle.net/kthornbloom/4T52A/2/

这是 JS:

// Step One: Append one blue box within each grey box

$('.grey').append('<div class="blue"></div>');

// Step Two: Make one copy of the red box already there, and place it within the new blue box.

$('.grey').each(function () {
    $('.red', this).clone().appendTo('.blue', this);
});

我为什么会得到现在的结果，我怎样才能达到预期的结果？

Answer 1

那是因为上下文选择器在 .append() 中不起作用。最快的解决方案(不是最优的)是重新创建一个新的 jQuery 对象:

$('.red', this).clone().appendTo($('.blue', this));

fiddle :http://jsfiddle.net/4T52A/3/

这里有一个最优解:

$('.grey').each(function () {
    var $this = $(this);
    $this.find('.red').clone().appendTo($this.find('.blue'));
});