拆分柱代碼 - 以重複使用「每個（）」的jQuery

分裂通過劃分成兩半的元素數列那麼它將 - 創建新的div和加入剩餘內容到新的div

下面我試圖用這個「每個（）」做，它-mostly-工作除了它是添加新的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去進入第二個容器

來源

2012-09-20 namretiolnave

那是HTML你開始用什麼，或者你想結束了呢？你可以在*之前和*之後發佈*嗎？ –

對不起，我很努力去理解你的描述，你可以改寫它嗎？或者包含一個jsfiddle？另外，不是'$（'body> #container'）'只需選擇'＃container'？ – JDandChips

http://jsfiddle.net/cdcWf/我附上了鏈接 – namretiolnave

您不能給兩個HTML節點使用相同的ID。 ID應該是獨一無二的！ :)嘗試更改ID爲container別的東西的第二個實例，在你的JavaScript更新這個問題，以及（appendTo('#container2')），看看會發生什麼

來源

2012-09-20 20:15:56 JDandChips

我很確定這可以工作，但是我正在一個網站上生成同一個div的多個實例。所以，硬編碼唯一的ID將無濟於事。我應該使用類來分類ID嗎？ – namretiolnave

它是**整數**，你用一個唯一的id來命名每個元素。你可以使用'.attr（「id」，「newid」）'方法在jQuery中命名你的其他衍生實例。或者你可以給容器一個普通的類來選擇它們。然後使用這個方法，你可以選擇所有的容器'$（'。containerclass'）'並遍歷每個元素，或者使用索引來獲得一個特定的實例'$（'。containerclass'）[0]'。 – JDandChips

我是新來創建新的ID和索引任何建議的線程？ – namretiolnave

你最有可能遇到了問題，因爲你正在使用的ID #container不止一次。

更改<div> s到<div class="container">，然後爲each功能更新的選擇：

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

來源

2012-09-20 20:24:16 billyonecan

拆分柱代碼 - 以重複使用「每個（）」的jQuery

回答

相關問題