gpt4 book ai didi

jquery - 如何使这个 jquery 编曲器工作?

转载 作者:行者123 更新时间:2023-11-28 03:43:10 26 4
gpt4 key购买 nike

我的困境是:我有一大堆照片要插入一张大 table ,但我更容易花一点时间在 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 发生了什么,我该如何解决这个问题。

谢谢你的帮助

最佳答案

我建议您不要尝试包装每个项目,而是动态构建表格并替换原来的 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 - 如何使这个 jquery 编曲器工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8985689/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com