Jquery：迭代內部克隆（.each）加擾html結構

我有一段代碼，我似乎無法修復。一切工作正常，如果我不遍歷該函數，或者如果我不克隆。當我把它們放在一起時，divs的結構變得混亂。Jquery：迭代內部克隆（.each）加擾html結構

任何代碼之前，我先說：

<div class="origin"></div>

然後我寫了一些劇本中添加HTML，它應該像下面這樣的結構：代碼：

<div id="id0"> 
    <div class="scroller"> 
    <div class="origin"></div> 
    </div> 
    <a href="#"></a> 
</div> 
<div class="viewport"></div> 
<div id="id1"> 
    <div class="scroller"> 
    <div class="origin"></div> 
    </div> 
    <a href="#"></a> 
</div> 
<div class="viewport"></div>

它開始很好，但如果取消註釋下面的兩行，帶ID的第二個div現在位於先前的視口內，而不是纏繞「原點」。我試圖將圖像和可能的標題複製到每個「原點」內部到自己的視口內（圖像上有兩個周圍的div）。

代碼：

function writeGallery(i) { 
    var startDiv = $("div.origin:eq("+i+")"); 
    startDiv.wrap('<div class="scroller"></div>'); 
    startDiv.parent().wrap ('<div id="id' + i + '" />'); 
    var horizThumbwrap  = startDiv.parent().parent(); 
    horizThumbwrap.append ('<a href="#"></a>'); 
    horizThumbwrap.after ('<div class="viewport" />'); 

    //var horizViewport  = startDiv.parent().parent().next(".viewport"); 
    //startDiv.clone().appendTo(horizViewport); 
} 

$(document).ready(function(){ 

$("div.origin").each(function(index) { 
writeGallery (index); 
}); 

$('#result').text($('#container').html()); 
});

在撥弄這裏的代碼（去掉註釋2線看亂）：http://jsfiddle.net/AjSnx/

我能想到的是唯一需要重寫它以各種方式和只希望我能找到一些有用的東西。但是因爲這是我的第一個jQuery項目，所以我想了解我在這裏做錯了什麼。

任何人都可以幫忙嗎？謝謝！

來源

2012-07-14 Jennifer Michelle

要附加克隆的數據'horizViewport'這是不確定的。 – undefined 2012-07-14 14:38:57

它在第一次迭代中起作用 - 你是否取消了兩條線的註釋？如果它沒有定義，我不明白它如何工作。或者嗯，我想這可能會導致我不明白。 – 2012-07-14 14:45:08

在每個循環中，您使用:eq()選擇.origin元素。但是，在每個循環中您都會創建另一個<div class="origin" />。因此，在接下來的循環中，您正在選擇剛剛使用.clone()和創建的<div>而不是從開始的<div>。要解決此問題，請使用傳遞給由.each()調用的函數的第二個參數。它包含在開始時匹配的當前元素（即您打算在循環內使用的元素）。

詳情請參閱my update。產生的HTML是這樣的：

<div id="id0"> 
    <div class="scroller"> 
     <div class="origin"></div> 
    </div> 
    <a href="#"></a> 
</div> 
<div class="viewport"> 
    <div class="origin"></div> 
</div> 

<div id="id1"> 
    <div class="scroller"> 
     <div class="origin"></div> 
    </div> 
    <a href="#"></a> 
</div> 
<div class="viewport"> 
    <div class="origin"></div> 
</div>

來源

2012-07-14 14:35:45 Wolfram

哦！我正在研究這個，但它看起來像你修復它，非常感謝。現在試着去了解。 :) – 2012-07-14 14:50:18

謝謝你的更新Wolfram。這是一個noob錯誤，呃？我從中學到了很多，謝謝。 :) – 2012-07-14 14:56:55

只是因爲你從jQuery獲得這個元素，所以沒有必要再選擇它。雖然很難趕上。您還可以更加縮短您的代碼，請參閱[例如Raminson的回答]（http://stackoverflow.com/a/11484777/95033）。 – Wolfram 2012-07-14 15:05:24

如果我沒有完全倒退，你試圖把origin-div ti的內容放在viewport-div的原點是startDiv，對吧？

你可能不需要克隆的東西，也許只是填充視口的innerHTML原產innerHTML的

startDiv.closest('.viewport').html(startDiv.html());

爲你做這項工作？

來源

2012-07-14 14:35:12

謝謝Max，這是一個有用的想法。 :) – 2012-07-14 14:52:33

作爲替代你可以試試這個：

$("div.origin").each(function(i) { 
     $(this).wrap('<div id="id'+i+'><div class="scroller"></div></div>') 
     $(this).after('<a href="#"></a><div class="viewport"></div>')  
    });

http://jsfiddle.net/AjSnx/3/

來源

2012-07-14 15:02:56 undefined

我沒有意識到jQuery足夠聰明，可以包裝兩次，很好的提示！ – 2012-07-14 15:11:21

Jquery：迭代內部克隆（.each）加擾html結構

回答

相關問題