0

以下代码将：

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

下面我尝试使用“ each()”来做到这一点，它 - 大部分 - 工作，除了它添加新的 div .second #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进入第二个容器

4

2 回答 2

0

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

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

$('div.container').each(function() {
  var select = $(this);
  // your code
  .appendTo(select);
});
于 2012-09-20T20:24:16.937 回答
0

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

于 2012-09-20T20:15:56.380 回答