Вставка прототипа после - PullRequest
Новая
       5

Вставка прототипа после

1 голос
/ 21 марта 2011

Я пытаюсь разбить неупорядоченный список, содержащий восемь элементов, на два списка, каждый из которых содержит четыре элемента.

Я подумал, что .insert закрывающие и открывающие теги после четвертого элемента списка должны его обрезать: 

if(i == 3) {
  $(li).insert({
    after: "</ul><ul>"
  });
}

Но Прототип дает мне <ul></ul> в обратном порядке. 

<ul>
  <li />
  <li />
  <li />
  <li />
<ul></ul>
  <li />
  <li />
  <li />
  <li />
</ul>

Есть простой ответ на этот вопрос?

Ответы [ 4 ]

4 голосов
/ 21 марта 2011

Вот как бы я это сделал

HTML: 

<div id="list">
        <ul id="original">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>

Javascript: 

var ul = new Element('ul');
$$('#original li').each(function(li, index) {
    if (index % 3 == 0 && index > 0) {
        $('list').insert({
            bottom: ul
        });
        ul = new Element('ul');
    }
    ul.insert({
        bottom: li
    });

});
$('list').insert({
    bottom: ul
});
$('original').remove();

Посмотрите на живой пример

1 голос
/ 23 марта 2011

Используйте оператор MOD MOD JavaScript, чтобы увидеть, когда вы находитесь в первой или четвертой строке. Если да, создайте элемент UL, а затем добавьте LI к этому элементу.

Что-то вроде: 

if ( i % 4 == 0 ) {
  currentUl = new Element('ul');
  $('li').appendChild(currentUl);
}
1 голос
/ 21 марта 2011

Это не так.

Создайте новый UL и переместите элементы в этот список: 

function moveToOtherList(item){
    var myList = item.up('ul');
    var next = myList.next('ul');
    if(!next){
        next = new Element('ul',{style:"margin-top:20px;"});
        myList.insert({after:next});
    }
    next.insert({bottom:item});
}

$$('ul li').each(function(item, index){
    if(index > 3){
        moveToOtherList(item);
    }
});

См. этот jsfiddle длярабочий пример

0 голосов
/ 21 марта 2011

Я не знаю, в Prototype, но в Jquery вы можете попробовать это http://jsfiddle.net/nxapS/7/

...