1

我有多个部分...在这些部分中几乎没有子元素...我需要进行操作，以便为每个部分移动 1 个元素，例如 .inner 在另一个元素之后，例如 h1

我的尝试在这里http://jsfiddle.net/shavindra/LDpwq/1/但问题是它没有循环并在最后打印好..但我希望输出不同，如下所示......

初始状态：

<section class="greeting">
  <h2>Greetings 1</h2>
  <div class="time">Morning</div>
  <div class="inner">Good 1</div>
</section>

<br />
<br />

<section class="greeting">
  <h2>Greetings 1</h2>
  <div class="time">Afternoon</div>
  <div class="inner">Good 2</div>
</section>

<br />
<br />

<section class="greeting">
  <h2>Greetings 1</h2>
  <div class="time">night</div>
  <div class="inner">Good 3</div>
</section>

操纵后

<section class="greeting">
  <h2>Greetings 1</h2>
  <div class="inner">Good 1</div>
  <div class="time">Morning</div>
</section>

<br />
<br />

<section class="greeting">
  <h2>Greetings 1</h2>
  <div class="inner">Good 2</div>
  <div class="time">Afternoon</div>
</section>

<br />
<br />

<section class="greeting">
  <h2>Greetings 1</h2>
  <div class="inner">Good 3</div>
  <div class="time">night</div>
</section>
4

3 回答 3

1 
$(".time").each(function() {
    $(this).before($(this).siblings('.inner'));
});​

演示：http: //jsfiddle.net/LDpwq/4/

于 2012-05-14T00:01:26.417 回答
1

您的原始代码有两个问题：

$(".greeting").each(function() {
    $(this).children('.time').addClass("on");
    $(this).children('.time').after($('.inner'));
});

1）您正在选择inner要移动的所有具有类的元素：

$('.inner')

Intead，仅使用当前 div 中的一个：

$(this).children('.inner')

2）您正在使用该after函数，它将作为参数传递的内容插入到您调用该函数的元素之后。另一方面insertAfter以相反的方式操作。来自jQuery 文档：

使用 .after()，方法前面的选择器表达式是插入内容的容器。另一方面，使用 .insertAfter()，内容在方法之前，作为选择器表达式或作为动态创建的标记，它被插入到目标容器之后。

因此，您可以将代码更改为：

$(".greeting").each(function() {
    $(this).children('.time').addClass("on");
    $(this).children('.time').insertAfter($(this).children('.inner'));
});

或这个：

$(".greeting").each(function() {
    $(this).children('.time').addClass("on");
    $(this).children('.inner').after($(this).children('.time'));
});
于 2012-05-14T00:20:54.920 回答
0

尝试这个：

$(".greeting").each(function() {
    $(this).children('div:eq(0)').before($(this).children('div:eq(1)'));
});

http://jsfiddle.net/LDpwq/15/

于 2012-05-14T00:01:00.547 回答