javascript - 在 DOM 中移动更多具有相同类的元素

Question

我有以下代码，我想将“a”标签移到两个父级(other-div 和 some-other-div)之上

<div class="container">
  <div class="some-other-div">
    <div class="other-div">
      <a class="link" href="#">move me<a>
    </div>
      </div>
    <div class="some-other-div">
      <div class="other-div">
        <a class="link" href="#">move me<a>
      </div>
    </div>
</div>

看起来像这样

<div class="container">
   <a class="link" href="#">move me<a>
  <div class="some-other-div">
    <div class="other-div">

    </div>
      </div>
      <a class="link" href="#">move me<a>
    <div class="some-other-div">
      <div class="other-div">

      </div>
    </div>
</div>

这是我创造的一支笔:

http://codepen.io/florinsimion/pen/qqRWOo

有什么想法吗？

Answer 1

使用before()带有回调函数的方法，该函数迭代元素并在回调内部返回要移动的 a 标记。

$('.some-other-div').before(function() {
  return $(this).find('.link');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="some-other-div">
    <div class="other-div">
      <a class="link" href="#">move me</a>
    </div>
  </div>
  <div class="some-other-div">
    <div class="other-div">
      <a class="link" href="#">move me</a>
    </div>
  </div>
</div>