Question

我有以下HTML：

<div class="div one">
 <div class="text">One</div>
 <svg>object</svg>
</div>
<div class="div two">
 <div class="text">two</div>
 <svg>object</svg>
</div>
<div class="div three">
 <div class="text">three</div>
 <svg>object</svg>
</div>

我想在svg对象之后插入文本div，使用：

$('.div .text').each(function(){
 $(this).insertAfter('.div svg');
});

但输出如下：codepen

<div class="div one">
 <svg>object</svg>
 <div class="text">three</div>
 <div class="text">two</div>
 <div class="text">one</div>
</div>
<div class="div two">
 <svg>object</svg>
 <div class="text">three</div>
 <div class="text">two</div>
 <div class="text">one</div>
</div>
<div class="div three">
 <svg>object</svg>
 <div class="text">three</div>
 <div class="text">two</div>
 <div class="text">one</div>
</div>

我想each()选择div中的每个元素，而不是所有元素，并在目标元素之后重复它们。

Answer 1

你可以这样做。 append函数始终将Element放置在Wrapping Element的最后位置：）

$('.three').append($(this));

Answer 2

您需要循环浏览每个.div，如下所示：

$('.div').each(function() {
  $(this).find('.text').detach().insertAfter($(this).find('svg'));
});

和detach来自其原始位置insert之后的特定div svg。因此，您需要使用svg

查找$(this)

<强> DEMO

Answer 3

我想你想要

$('.div .text').each(function() {
  $(this).insertAfter($(this).next());
  // or  $(this).next().after(this);
});

.text {
  font: bold 21px/2em Arial
}
svg {
  background: #bbb;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div one">
  <div class="text">One</div>
  <svg>object</svg>
</div>
<div class="div two">
  <div class="text">two</div>
  <svg>object</svg>
</div>
<div class="div three">
  <div class="text">three</div>
  <svg>object</svg>
</div>

Answer 4

您需要找到当前svg元素的兄弟.div .text元素，然后插入。试试这个：

$('.div .text').each(function() {
  $(this).siblings('svg').after(this);
});

Updated codepen

Answer 5

如果我没错，如果你想删除.text元素并将其放在svg元素之后，请使用：

$('.div  .text').each(function() {
 // get the closest parent and find its child(svg)
 var target = $(this).closest('.div').find('svg');
 // insert after svg(.text)
 $(this).insertAfter(target);
});

更新了DEMO

使用多个容器

5 个答案: