如何使这个 jquery 编曲工作？答案

【问题标题】：How to make this jquery arranger work?如何使这个 jquery 编曲工作？
【发布时间】：2012-01-24 19:58:45
【问题描述】：

我的困境是：我有一大堆照片要插入一个巨大的表格，但我更容易花一点时间在 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>

看看 test9 发生了什么，我该如何解决这个问题。

感谢您的帮助

【问题讨论】：

专业提示：与其期望其他人尝试复制您的问题，不如花 5 分钟创建一个很好的 jsfiddle.net 来证明问题。
jsfiddle: jsfiddle.net/rwdUM
好的，我保证下次我会做一个我保证
你没有id为“分页”的元素！？！？
@stian.net - 除了结束脚本标签之后的第一个元素：D

标签： jquery html css-selectors

【解决方案1】：

我建议不要尝试包装每个项目，而是动态构建表格并替换原始 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/

【讨论】：

你能解释你一步一步做了什么吗：D