1

子画像をより「密接に」ラップするには、親アンカーを移動する必要があります。私の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 が表示されます。よろしくお願いします...

4

1 に答える 1

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

フィドル

于 2012-08-11T02:04:24.023 に答える