jquery - 将父元素移动到兄弟元素中？

Question

我需要移动父锚点以更“紧密”地包裹子图像。我的 HTML 的简化版本是：

<a class="link">
  <span class="container">
    <img class="image" />
    <span>An image caption.</span>
  </span>
</a>

我正在寻找这个结果：

<span class="container">
  <a class="link">
    <img class="image" />
  </a>
  <span>An image caption.</span>
</span>

我试过：

/* I have to process each anchor individually and only make 
 * this move if there's a span.container as the first child.
 */
$('a.link').each(function() {
  if ($(this).children('span.container').length > 0) {
    $(this).find('img.image').wrap($(this));
    $(this).children('span.container').unwrap();
  }
});

我最终得到：

<span class="container">
  <a class="link">
    <span class="container">
      <img class="image">
        <img class="image" />
      </img>
      <span>An image caption.</span>
    </span>
  </a>
  <span>An image caption.</span>
</span>

警告：我是n00b。我坚持使用 jQuery 1.3.2。我正在使用一个unwrap()插件，它似乎如上所示工作。问题出在wrap($(this))我的身上吗？$(this)应该只包含<a class="link">而不是它的孩子吧？它似乎包含孩子，它们被插入包装中，我得到重复的 HTML。提前谢谢了...

Answer 1

$('.link').each(function(){
    var $me = $(this);
    $me.children('.container').unwrap().find('img').wrap($me);
});

小提琴