Форум

alexsus · #1 (**permalink**) 09.06.2010, 15:42

Задача стоит такая: есть определенное количество span, нужно завернуть их по три штуки, в div

Когда спанов 6, 9, 12 - все работает правильно
А вот когда их не кратное трем количество, получается не то что мне надо: в первом диве один или два спана - а надо в последнем, + почему то 1-й спан в последнем диве

Вообщем помогите пожалуйста, второй день не могу понять почему...

<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
span {
  width:100px; height:100px;
  margin:5px; border:3px double #369;
}
div {
  border:3px solid #369;
  padding: 5px
}
</style>
<script type="text/javascript">
$(function(){
  var perpage = 3;
  num = $(".item span").length;
  page = Math.ceil(num/perpage);

  for (var i=1; i<page+1; i++) {
    $(".item").append("<div class=item" + i + "></div>");
    nws = $(".item span").slice(0,3);
    $(".item" + i).html(nws);
  }
});
</script>
</head>
<body>
<div class='item'>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>


</div>

Skipp · #2 (**permalink**) 09.06.2010, 15:48

а попробуй цикл в обратку пустить.
for (var i=page; i==1; i--)

alexsus · #3 (**permalink**) 09.06.2010, 15:53

for (var i=page; i>0; i--) {

вот так вот дает тот же результат

micscr · #4 (**permalink**) 09.06.2010, 16:05

Я бы так делал:

var how = 3;
var par = $('div.item')[0];
while (true) {
  var $span = $(par).children('span').eq(0); // первого непосредственного ребенка span
  if ($span.length == 0 ) break;// не осталось -> выход
  var $dp = $(par).find('div.obv:last'); // куда поместить
  if (($dp.length == 0) || ($dp.children().length == how)) { // некуда
    $dp = $('<div class="obv"></div>').appendTo($(par)); // создаем
  }
  $span.appendTo($dp); // переносим
}

<div class="obv"></div> - в такой div оборачиваем

alexsus · #5 (**permalink**) 09.06.2010, 16:21

Спасибо! Ваш пример работает, хотя как для новичка, немного сложен. например $span = $("span") и зачем var $dp а не просто var dp
Вопрос остается вопросом? slice не правильно работает? Это как то с Dom связанно? Или функция не правильно реализована?

micscr · #6 (**permalink**) 09.06.2010, 16:24

var $dp
ничем не отличается от
var dp
по сути, просто так я подчеркиваю что $dp - именно jQuery объект.

e1f · #7 (**permalink**) 09.06.2010, 16:35

micscr, многовато как-то всего. Проще так:

<!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" xml:lang="en" lang="en">

<head>
    <title>Wrap test</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 0.18.1.1" />

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
    $(function(){
        var i = 0,
            perpage = 3,
            items = $('.item span').get();

        while (items.length) {
            $(items.splice(0, perpage)).wrapAll('<div class=item-' + ++i + '></div>');
        }
    });
    </script>

    <style type="text/css">
    span {
        width:100px;
        height:100px;
        margin:5px;
        border:3px double #369;
    }
    div {
        border:3px solid #369;
        padding: 5px;
    }
    </style>
</head>

<body>
    <div class='item'>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
        <span>11</span>
        <span>12</span>
        <span>13</span>
    </div>
</body>
</html>

alexsus · #8 (**permalink**) 09.06.2010, 16:43

Спасибо красивое решение, и с while похоже slice работает правильно.
items = $('.item span'); А вот без get() то же ведь можно? или это принципиально?

e1f · #9 (**permalink**) 09.06.2010, 16:49

alexsus, попробуйте, может и можно. Разницу между тем, что дает get, и тем, что возвращает $(), понимаете? Если нет -- почитайте.
Лично я считаю нехорошим стилем натравливать splice (не slice, это важно) на jQuery-объект. В моем понимании, это чем-то сродни изменению приватного свойства объекта напрямую, а не через setter.

micscr · #10 (**permalink**) 09.06.2010, 16:53

e1f, ага, так лучше, но есть минусик: при jQuery к тебе поступают javascript-вопросы:

Цитата:

А вот без get() то же ведь можно?

Форум

Справочник

Discord чат

Курсы javascript