Как заставить этот jQuery аранжировщик работать? - PullRequest
Новая
       1

Как заставить этот jQuery аранжировщик работать?

2 голосов
/ 24 января 2012

Моя дилемма заключается в следующем: у меня есть грузовик с фотографиями, который можно вставить в огромный стол, но мне легче тратить немного времени на 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, как я могу решить эту проблему.

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

1 Ответ

0 голосов
/ 24 января 2012

Я бы предложил, чтобы вместо попытки обернуть каждый элемент, вы динамически создаете таблицу и заменяете оригинальный 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...