Как сделать этот аранжировщик jquery?

Моя дилемма такова: у меня есть грузовик с фотографиями для вставки в огромный стол, но мне легче потратить немного времени на jquery.Как сделать этот аранжировщик jquery?

Я хочу вставить эти фотографии в divs и сценарий 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 как я могу решить эту проблему.

Спасибо за вашу помощь

источник

2012-01-24 John the horn

Protip: Вместо того, чтобы ожидать всех остальных, чтобы попытаться воспроизвести вашу проблему, потратить 5 минут создавая http://www.jsfiddle.net хороший, который демонстрирует проблема. – Jamiec

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

ok Я обещаю в следующий раз сделать то, что обещаю –

Я предположил бы, что вместо того, чтобы обернуть каждый элемент, динамически создать таблицу и заменить оригинальный Див. Что-то вроде этого:

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?

ответ

Смежные вопросы