使用each（）的jQuery DOM操作;

我试图用jQuery使用each（）来同时对几个元素做一些简单的DOM操作。 我得到的结果我不明白。

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

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

为什么我会得到我的结果，以及如何获得理想的结果？

---

这是因为上下文选择器不能在.append() 。 最快的解决方案（不是最优化的）是重新创建一个新的jQuery对象：

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

小提琴：http://jsfiddle.net/4T52A/3/

这里最佳的解决方案：

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

---

尝试这个：

http://jsfiddle.net/4T52A/6/

    // 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 () {
    var blue = $('.blue', this);
    $('.red', this).clone().appendTo(blue);    
});

---

appendTo不会那样工作，我个人只会使用$(this)对象并从那里获取所需的内容。

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

与一个工作jsFiddle

链接地址: http://www.djcxy.com/p/77875.html

上一篇: jQuery DOM manipulation with each();

下一篇: ASP.NET handling requests when connection is dropped after switching to IIS8