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を2番目のコンテナーに入れたいことです

4

2 に答える 2

0

ID#containerを複数回使用しているため、問題が発生している可能性があります。

をに変更して<div>から、関数<div class="container">のセレクターを更新します。each

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

2つのHTMLノードに同じIDを与えることはできません。IDは一意である必要があります！:) IDをの2番目のインスタンスに変更してみてくださいcontainer。これもJavaScriptで更新して（appendTo('#container2')）、何が起こるかを確認してください。

于 2012-09-20T20:15:56.380 に答える