1

我有一段似乎无法修复的代码。如果我不遍历该函数或不克隆，一切正常。当我把它们放在一起时，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 现在位于前一个视口内，而不是包裹在“原点”周围。我正在尝试将每个“原点”内的图像和可能的标题复制到其自己的视口内（图像上有两个周围的 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 项目，我也想了解我在这里做错了什么。

任何人都可以帮忙吗？谢谢！

4

3 回答 3

0

如果我没有完全倒退，那么您正在尝试将 origin-div 的内容放在 viewport-div 的 origin 是 startDiv 的位置，对吗？

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

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

那对你有用吗？

于 2012-07-14T14:35:12.067 回答
0

在每个循环内，您都.origin使用:eq(). 但是，在每个循环中，您都会创建另一个<div class="origin" />. 因此，在下面的循环中，您选择的<div>是刚刚创建的那个，.clone()而不是<div>从一开始就存在的那个。要解决此问题，请使用传递给由 调用的函数的第二个参数.each()。它包含在开始时匹配的当前元素（即您打算在循环中使用的元素）。

详情请看我的更新。生成的 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-14T14:35:45.357 回答
0

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

   $("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-14T15:02:56.160 回答