このjqueryアレンジャーを動作させるにはどうすればいいですか？

私のジレンマはこれです：私は巨大なテーブルに挿入する写真のトラックの負荷がありますが、私はjQueryに少し時間を費やすのは簡単です。このjqueryアレンジャーを動作させるにはどうすればいいですか？

これらの写真をdivに挿入し、jqueryスクリプトをテーブルに挿入したいとします。これは私のコードです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
.coios{ 
    width:100px; 

} 

</style> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/></script> 


</head> 

<body> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#pagination").wrap('<table class="coios">'); 


$("h1").css({'padding-left':'10px'});       
$(".one:nth-child(5n)").wrap('<tr class="cinci">'); 
$(".one:nth-child(n+6)").appendTo(".cinci"); 
$(".one").wrap('<td>'); 

}); 
</script> 



<div id="pagination"> 

<div class="one"> 
<h1>test1</h1> 
<img src="http://www.salice.ro/img/produse/thumbs/lyMuRHalbspan_140.jpg" /></img> 

</div> 

<div class="one"> 
<h1>test2</h1> 
<img src="http://www.salice.ro/img/produse/thumbs/26tb2U125albastru.jpg" /></img> 

</div> 

<div class="one"> 
<h1>test3</h1> 
<img src="http://www.salice.ro/img/produse/thumbs/26tb2U125albastru.jpg" /></img> 

</div> 
<div class="one"> 
<h1>test4</h1> 
<img src="http://www.salice.ro/img/produse/thumbs/26tb2U125albastru.jpg" /></img> 

</div> 
<div class="one"> 
<h1>test5</h1> 
<img src="http://www.salice.ro/img/produse/thumbs/26tb2U125albastru.jpg" /></img> 

</div> 

<div class="one"> 
<h1>test6</h1> 
<img src="http://www.salice.ro/img/produse/thumbs/26tb2U125albastru.jpg" /></img> 

</div> 

<div class="one"> 
<h1>test7</h1> 
<img src="http://www.salice.ro/img/produse/thumbs/26tb2U125albastru.jpg" /></img> 

</div> 

<div class="one"> 
<h1>test8</h1> 
<img src="http://www.salice.ro/img/produse/thumbs/26tb2U125albastru.jpg" /></img> 

</div> 

<div class="one"> 
<h1>test9</h1> 
<img src="http://www.salice.ro/img/produse/thumbs/26tb2U125albastru.jpg" /></img> 

</div> 


<div class="one"> 
<h1>test10</h1> 
<img src="http://www.salice.ro/img/produse/thumbs/26tb2U125albastru.jpg" /></img> 

</div> 


<div class="one"> 
<h1>test11</h1> 
<img src="http://www.salice.ro/img/produse/thumbs/26tb2U125albastru.jpg" /></img> 

</div> 


</div> <!--pagination--> 




</body> 
</html>

私はこの問題をどのように解決できますか。あなたの助け

出典

2012-01-24 John the horn

Protip：よりもむしろ実証したhttp://www.jsfiddle.net良いを作成する5分を費やし、誰もがあなたの問題を再現しようとすることを期待し、このような何か問題。 – Jamiec

jsfiddle：http：//jsfiddle.net/rwdUM/ – Jamiec

ok私は次回を約束します。私は約束します –

私が代わりに各項目をラップしようとしているの、あなたが動的にテーブルを構築し、元のdivを交換することを示唆しているため

感謝。

var $table = $('<table class="coios"></table>'); // create a new table 
var $tr = null; 

$('.one').each(function(i,e){ // loop each ".one" element (i is the index, e is the element) 

    if((i%5) == 0){ // create a new tr on iteration 1, 6, 11 etc 
     $tr = $('<tr class="cinci"></tr>'); 
    } 

    var $td = $('<td></td>'); // create a new td 
    $td.append(e); // append the current ".one" element to the td 
    $tr.append($td); // append the td to the current tr 

    if((i%5) == 0){ // make sure if we've created a new tr to append it to the table 
     $table.append($tr); 
    } 
}); 

$("#pagination").replaceWith($table); // replace the "#pagination" element with our new table

ライブ例：http://jsfiddle.net/rwdUM/2/

出典

2012-01-24 11:52:09 Jamiec

あなたはステップplsで何をしたのか説明できますか？D –

@Johnthehorn - コードコメントによる更新を参照してください。 – Jamiec

あなたは私にはあまりにも良いです：D –

このjqueryアレンジャーを動作させるにはどうすればいいですか？

答えて

関連する問題