Question

我有一段代码似乎无法修复。如果我不迭代该函数，或者如果我不克隆，那么一切正常。当我把它们放在一起时，div的结构会被扰乱。

在任何代码之前，我从：

开始

<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现在位于上一个视口内，而不是包裹在“origin”中。我正在尝试将每个“原点”内的图像和标题复制到其自己的视口内（图像上有两个周围的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项目，我也想了解我在这里做错了什么。

有人可以帮忙吗？谢谢！

Answer 1

如果我没有完全倒退，你试图将origin-div的内容放在viewport-div中，其中origin是startDiv，对吗？

您可能不需要克隆某些东西，也许只需用innerHTML原点填充视口的innerHTML

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

这对你有用吗？

Answer 2

在每个循环中，您使用.origin选择:eq()元素。但是，在每个循环中，您将创建另一个<div class="origin" />。因此，在以下循环中，您选择使用<div>创建的.clone()和而不是从头开始的<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>

Answer 3

作为替代方案，你可以试试这个：

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

Jquery：迭代内部克隆（.each）扰乱html结构

3 个答案: