0

环顾四周，找不到答案，但如果以前有人问过，请道歉。

我正在寻找用另一个相同类型的 DIV 替换一个 DIV，为新 DIV 设置动画，然后删除第一个 DIV，允许新 DIV 代替删除的 DIV。创建并附加新的 DIV 后，HTML 代码如下所示（减去注释）：

<div class="className">Inner HTML</div> <!-- original "className" div -->
<div class="className">Inner HTML</div> <!-- appended "className" div -->

我尝试了几种方法，最近的是：

$(".className:eq(0)").remove();

和

$(".className:eq(0)").html() = $(".className:eq(1)").html();
$(".className:eq(1)").remove();

第一种方法删除所有“className”元素，很可能是由于 [0] 元素将整个数组引用。第二种方法消除了第二个元素，而不是第一个。

为新元素设置动画并保持原样很简单，但我想避免在 DOM 中建立“className”元素，因为解决方案需要递归，允许“className”div必要时更换多次。

4

3 回答 3

1

使用jquery的第一种方法

 $(".className").first().remove();

如果您不想删除所有对象，您可以通过首先检查结果集的长度来保护：

   if($(".className").length > 1) {
          $('className").first().remove();
   }
于 2012-06-28T17:17:25.337 回答
1

http://api.jquery.com/first-child-selector/

$(".className:first-child").remove();

如果最多只能有两个（旧的和新的）className邻居，您可以选择第二个，然后返回第一个。

$(".className + .className").prev().remove();

从以下方面窃取一些想法：

于 2012-06-28T17:13:54.230 回答
1

只是简单的使用.replaceWith()

$(".className:first-child").replaceWith('<div class="className">Inner HTML</div>');

.replaceWith将用新的替换以前classsName的，在这种情况下你不需要.append()and .remove()。

或者

$(".className:first").remove();

根据评论

我认为您正在尝试以下操作：

$('<div class="className">New Div</div>').appendTo('#target').animate({
    width: 120,
    height: 120
}, 1500, function() {
    $('div.className:first').remove();
});

工作样本

于 2012-06-28T17:15:05.527 回答