jQuery中的HierarchyRequestError replaceWith

我想通過id爲'imgDiv'的div的所有子元素，並用通過用父錨來包裝圖像創建的新元素替換它們。像<image src=...>到<a href=...><image ...></a>。代碼如下：jQuery中的HierarchyRequestError replaceWith

$(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>

來源

2013-05-27 zoujyjs

你試圖通過元素替換this給你附加它，並通過附加的元素，實際上，它會移動它，因此，在這裏，將它從DOM中移除，因此出現錯誤。

更換

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

與

$(this).wrap(fancyAnchor);

來源

2013-05-27 07:37:06

另外，'$（elem）.children（'。image'）...'應該是'elem.children（'。image'）...' – Mysteryos

@ Mysteryos這兩個工作，但你是對的，這將是更清潔。 –

我真的不明白。那麼這就像參考或價值問題？當我將'this'追加到錨點時，實際上'this'是對''的引用，我替換它然後導致錯誤？ – zoujyjs

-1

不要使用$（本）.replace或任何改變內部的每個DOM。

編輯：看來這不是問題

我也建議使用$。每個（...，F），而不是$（...）各（F）。

你也考慮對子級的wrap function而不是$。每次，它正是你需要的：

$(elem).children('.image').wrap(function(){ 
      return $('<a>').addClass('fancybox').attr('data-fancybox-group', 'gallery').attr('href', $(this).attr('src')); 
     });

來源

2013-05-27 07:36:52 TecHunter

-1不解釋錯誤的真正原因，併爲模糊的建議，你不應該讓DOM一個'.each'內改變呼叫。我看不出有什麼理由不這樣做，並且OP的問題可能以與'.each'完全相同的方式發生。 '.each'在這裏是無關緊要的。 –

@MarkAmery對不起，也許這是我的錯，在說這個問題**這個錯誤很奇怪，我認爲這是由每個函數引起的？**，這可能會誤導TecHunter – zoujyjs

@zoujyjs thx來捍衛我，但他是對的，我應該仔細閱讀append然後replaceWith是問題 – TecHunter

jQuery中的HierarchyRequestError replaceWith

回答

相關問題