Question

我的困境是这样的：我有一大堆卡车插在一张巨大的桌子上，但我更容易花一点时间在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会发生什么，我该如何解决这个问题。

感谢您的帮助

Answer 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/

如何使这个jquery编曲工作？

1 个答案: