Question

我需要移动一个父锚点以更多地包裹儿童图像＆＃34;密切关注＃34;。我的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。我正在使用an unwrap() plugin，这似乎正如上所述。问题出在我的wrap($(this))我认为？ $(this)应该只包含<a class="link">而不包含其子项吗？它似乎包含了孩子，他们被重新插入包装中，我得到了重复的HTML。非常感谢...

Answer 1

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

Fiddle

将父元素移动到兄弟姐妹？

1 个答案: