Question

以下代码将：

通过将元素数量除以一半来分割列 - 创建一个新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 进入第二个容器

Answer 1

您不能为两个HTML节点提供相同的ID。 ID应该是唯一的！ :)尝试将ID更改为container的第二个实例，并在您的javascript中更新此内容（appendTo('#container2')），看看会发生什么

Answer 2

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

将您的<div>更改为<div class="container">，然后更新each功能的选择器：

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

拆分列代码 - 使用“each（）”jQuery重复

2 个答案: