Question

我有以下HTML标记：

<div class="form-item">
   <i>item 1</i>
   <div class="content">
      some content for item 1
   </div>
   <div class="description">
      some description for item 1
   </div>
</div>

<div class="form-item">
   <i>item 2</i>
   <div class="content">
      some content for item 2
   </div>
   <div class="description">
      some description for item 2
   </div>
</div>

<div class="form-item">
   <i>item 3</i>
   <div class="content">
      some content for item 3
   </div>
   <div class="description">
      some description for item 3
   </div>
</div>

我希望在其父级中的相关.description标记之后插入<i>。问题是，每个.description后插入每个<i>。

我的尝试是：

$('.form-item .description').insertAfter('.form-item i');

但我只想在.description

之后在父母中插入相关项i

怎么做？

由于

Answer 1

你需要迭代它们中的每一个并附加到它们的兄弟i标签元素：

$('.form-item .description').each(function(){
  $(this).insertAfter($(this).prevAll('i'));
});

<强> Working Demo

Answer 2

或者您可以使用$.fn.after方法撤消任务：

$('.form-item i').after(function() {
    return $(this).siblings('.description');
});

演示：

＆＃13;

$('.form-item i').after(function() {
    return $(this).siblings('.description');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item">
   <i>item 1</i>
   <div class="content">
      some content for item 1
   </div>
   <div class="description">
      some description for item 1
   </div>
</div>

<div class="form-item">
   <i>item 2</i>
   <div class="content">
      some content for item 2
   </div>
   <div class="description">
      some description for item 2
   </div>
</div>

<div class="form-item">
   <i>item 3</i>
   <div class="content">
      some content for item 3
   </div>
   <div class="description">
      some description for item 3
   </div>
</div>

＆＃13;

对其父级中的每个元素使用insertAfter

2 个答案: