0

IDが「imgDiv」であるdivのすべての子要素を調べて、それらすべてを、画像を親アンカーでラップすることによって作成された新しい要素に置き換えたいと思います。のよう<image src=...>に<a href=...><image ...></a>。コードは次のとおりです。

$(document).ready(function(){
    var elem = $('.imgDiv');
    $(elem).children('.image').each(function(){
            var src = $(this).attr('src');//get the src of a image
            console.log(src);
            var fancyAnchor = $(document.createElement('a')).addClass('fancybox');//create an anchor parent of this image
            //add some attr to meet the need of the lib
            fancyAnchor.attr('data-fancybox-group', 'gallery');
            fancyAnchor.attr('href', src);
            //append this to the anchor
            fancyAnchor.append(this);
            //replace this with the new created anchor <a>
            $(this).replaceWith(fancyAnchor);
        });
  });

エラーがおかしいのですが、これは各機能が原因でしょうか？

http://images.craigslist.org/3F53If3J85Nd5Ic5L2d5q499af1a13b10124e.jpg test.js:5
Uncaught Error: HierarchyRequestError: DOM Exception 3 jquery.js:5
x.fn.extend.replaceWith jquery.js:5
x.fn.extend.domManip jquery.js:5
x.fn.extend.replaceWith jquery.js:5
(anonymous function) test.js:13
x.extend.each jquery.js:4
x.fn.x.each jquery.js:4
(anonymous function) test.js:3
x.Callbacks.l jquery.js:4
x.Callbacks.c.fireWith jquery.js:4
x.extend.ready jquery.js:4
S jquery.js:4

デバッグする場合は、HTML ページの抜粋を次に示します。

<body>
<div class="srchDiv"><p class="row" data-pid="3831489360"> <a href="/gbs/cto/3831489360.html" class="i" data-id="3F53If3J85Nd5Ic5L2d5q499af1a13b10124e.jpg"></a> <span class="pl"> <span class="star v" title="save this post in your favorites list"></span>  <a href="/gbs/cto/3831489360.html">1980 DATSUN 210</a> </span> <span class="l2"> <span class="pnr">  <span class="pp"></span> <small> (BOSTON)</small> <span class="px"> <span class="p"> pic</span></span> </span>  </span> </p><span class="msgSpan">Year: 1980</span><div class="imgDiv"><img class="image" src="http://images.craigslist.org/3F53If3J85Nd5Ic5L2d5q499af1a13b10124e.jpg"><img class="image" src="http://images.craigslist.org/3Kc3L53Jc5N45Ea5F7d5q7913e0d4462611cf.jpg"><img class="image" src="http://images.craigslist.org/3G23Ld3Jf5I95G45K8d5qe8c553cf8b961548.jpg"><img class="image" src="http://images.craigslist.org/3Kf3F73N85I25Gc5E7d5q80635196e0161ab7.jpg"><br><img class="image" src="http://images.craigslist.org/3E73Ge3L55L85Kb5H3d5qdf21ef9bd8c31c0d.jpg"><img class="image" src="http://images.craigslist.org/3Ec3G13J95Lf5K45M6d5q917b9e39d65217bd.jpg"><img class="image" src="http://images.craigslist.org/3Ff3L83Hd5L75I75E8d5q9a2b1c55c74710b5.jpg"><img class="image" src="http://images.craigslist.org/3Ef3Gb3H35La5I65H3d5q57b390b1f8ce1389.jpg"></div></div>
</body>
4

2 に答える 2

2

追加した要素に置き換えようとしてthisいますが、実際には要素を追加することで移動するため、ここではDOMから削除するため、エラーが発生します。

交換

fancyAnchor.append(this);
$(this).replaceWith(fancyAnchor);

と

$(this).wrap(fancyAnchor);
于 2013-05-27T07:37:06.987 に答える
-1

$(this).replace など、each 内の DOM を変更するものは使用しないでください。

編集：それは問題ではないようです

>

$(...).each(f) の代わりに $.each(...,f) を使用することもお勧めします。

また、$.each の代わりにラップ関数を検討する必要があります。これはまさに必要なことを行います。

$(elem).children('.image').wrap(function(){
            return $('<a>').addClass('fancybox').attr('data-fancybox-group', 'gallery').attr('href', $(this).attr('src'));
        });
于 2013-05-27T07:36:52.390 に答える