拆分列代码 - 使用“each()”jQuery 重复答案

【问题标题】：Split column code - to repeat using "each()" jQuery拆分列代码 - 使用“each()”jQuery 重复
【发布时间】：2012-09-20 19:56:17
【问题描述】：

以下代码将：

通过将元素数分成两半来拆分列，然后它将 -创建一个新的div并将剩余的内容添加到新的div中

下面我正在尝试使用“each()” 来执行此操作，并且它 - 大部分 - 可以正常工作，只是它添加了 new div 。第二个 #container 的第一个实例 - 尽管它正在读取每个组并正确拆分。

jQuery:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script>
$(document).ready(function(){

$('body > #container').each(function(){
var select = $(this);
//var chooseme= select.find('#container');
var count= select.find('div.firstcol > div.datarow').length;

if (count>1)
   {
        if (count & 1)
        {
        $("<div></div>").attr('class','secondcol').appendTo('#container'); 
        $('div.firstcol > div.datarow').eq(count/2).nextAll().appendTo('.secondcol');
        } 
        else
        {
        $("<div></div>").attr('class','secondcol').appendTo('#container'); 
        $('div.firstcol > div.datarow').eq(count/2-1).nextAll().appendTo('.secondcol');
        }
    } //if

 });//each

  });//ready
</script>

HTML：

<style>
body{font-family:arial;}
.firstcol{float:left;padding-left:100px;background-color:#ccc}
.secondcol{float:left;color:blue;position:relative;padding-left:100px;}
.secondcol h3 {font-size:18px;font-weight:normal;color:grey}
span{}
</style>

</head>
<body>
<div id="container">
<div class="firstcol">

<div class="datarow">
<span class="label">File Type</span>
<span class="value">JPG File</span>
</div>

<div class="datarow">
<span class="label">File Type</span>
<span class="value">JPG File</span>
</div>

<div class="datarow">
<span class="label">File Type</span>
<span class="value">JPG File</span>
</div>



</div>
</div>
<!--**********second group****************-->


<div id="container">
<div class="firstcol">

<div class="datarow">
<span class="label">File Type</span>
<span class="value">JPG File</span>
</div>




<div class="datarow">
<span class="label">File Type</span>
<span class="value">JPG File</span>
</div>



</div>
</div>

之后：正如代码呈现的那样：

<body>
<div id="container">
<div class="firstcol">
<div class="datarow">
</div>
<div class="secondcol">
**<div class="secondcol">**
</div>
<div id="container">
<div class="firstcol">
<div class="datarow">
<div class="datarow">
</div>
</div>

问题是我希望 secondcol 进入 second 容器

【问题讨论】：

HTML 是您开始使用的，还是您想要结束的？你能把 before 和 after 都贴出来吗？
对不起，我很难理解你的描述，你能改写一下吗？或包括一个jsfiddle？还有，$('body > #container') 不就是选择#container吗？
jsfiddle.net/cdcWf我附上了链接

标签： jquery each

【解决方案1】：

您不能为两个 HTML 节点指定相同的 ID。 ID应该是唯一的！ :) 尝试将 ID 更改为 container 的第二个实例，然后在您的 javascript (appendTo('#container2')) 中更新它，看看会发生什么

【讨论】：

我很确定这会奏效，但我正在一个网站上工作，该网站会产生相同 div 的多个实例。因此，硬编码唯一 ID 将无济于事。我应该用类子 ID 吗？
integral 用唯一的 id 命名每个元素。您可以使用 .attr("id","newid") 方法来命名您在 jQuery 中生成的其他实例。或者，您可以为容器提供一个通用类，以便将它们全部选中。使用此方法，您可以选择所有容器$('.containerclass') 并循环遍历每个元素，或者使用索引获取特定实例$('.containerclass')[0]。
我不熟悉创建新 ID 并索引任何建议的线程？
您只需要确保元素具有唯一的 ID。所以，当你生成一个容器时，如果你复制的东西已经有一个 id，请更改 id。当您编写 html 时，请确保您遵循相同的规则。如果您想对元素进行分组，请给它们相同的类并使用$('.classname') 选择它们。希望这可以帮助。如果不启动谷歌！

【解决方案2】：

您很可能会遇到问题，因为您多次使用 ID #container。

将<div>s 更改为<div class="container">，然后更新each 函数的选择器：

$('div.container').each(function() {
  var select = $(this);
  // your code
  .appendTo(select);
});

【讨论】：