Выберите от «значение» до «значение»

Question

У меня есть это

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>

, и я хочу выбрать из элемента 1 для элемента 5 , обернуть их в UL и выбрать 6 до 8 и заверните их в другой.

<ul>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
</ul>


<ul>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
</ul>

Как я могу это сделать ?.Большое спасибо

Answer 1

<div> не является допустимым дочерним элементом для <ul>. Вы должны вложить <li> элементы. Что касается селекторов, вы можете использовать :gt() и :lt():

$('div.item:lt(5)').wrapAll("<div>");
$('div.item:gt(4)').wrapAll("<div>");

Answer 2

Для создания допустимого HTML здесь вам нужно также обернуть их как элементы списка, получив такой результат:

<ul>
  <li><div class="item">1</div></li>
  <li><div class="item">2</div></li>
  <li><div class="item">3</div></li>
  <li><div class="item">4</div></li>
  <li><div class="item">5</div></li>
</ul>
<ul>
  <li><div class="item">6</div></li>
  <li><div class="item">7</div></li>
  <li><div class="item">8</div></li>
</ul>

Вот jQuery, который будет выполнять это обтекание / группирование каждых 5 элементови оставшиеся в конце, это будет работать для любого количества делений, которые у вас есть:

var elems = $("div.item");
for(var i = 0; i < elems.length; i+=5) {
  elems.slice(i, i+5).wrap('<li></li>').parent().wrapAll("<ul></ul>");
}​

Вы можете увидеть рабочую демонстрацию здесь , это .wrap() s каждый элемент в <li> затем объединяет группы, используя .wrapAll() в <ul>.

Answer 3

Теперь это далеко не идеально, но для начала:

function findByText(n){
  return $('.item').filter(function(){return $(this).text() == n});
}

$(function(){
   var from = findByText(2);
   var to = findByText(5);
   $('.item').slice(from.index(), to.index() + 1).wrapAll('<div />');
});

Это можно улучшить многими способами - вы можете захотеть преобразовать findByText в плагин, который фильтрует коллекцию, иВы демонстративно хотите проверить from и to, и, вероятно, позвоните $('.item') только один раз.
Я думаю, что этого достаточно, чтобы начать работу.

Рабочий пример: http://jsbin.com/ehite4/

Answer 4

Нечто подобное приведет вас туда ...

$('div.item').slice(0, 5).wrapAll('<ul />');
$('div.item').slice(5).wrapAll('<ul />');