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

@ 수수께끼 둘 다 작동하지만 당신 말이 맞아,이 청소기 것입니다. –

나는 그것을 정말로 얻지 않는다. 그래서 그것은 참조 또는 가치 문제와 같은 것입니까? 앵커에'this '를 추가하면 실제로'this'는''에 대한 참조이며, 그 다음에 오류가 발생합니다. – zoujyjs

-1

는 $ A 각 내부의 DOM을 변경 무엇이든지 (이) .replace 또는 사용하지 마십시오.

편집 :이

문제가없는 것 같다>

나는 또한 $ .each를 사용하는 것이 좋습니다 것입니다 (..., F) 대신 $ (...)의 각 (F)..

은 또한 대신 $ .each의 wrap function 고려 whould, 그것은 당신이 필요로 정확히 수행합니다

$(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 다음에 replace를주의 깊게 읽어야한다. 문제는 – TecHunter

jQuery에서 HierarchyRequestError replaceWith

답변

관련 문제