Select "value" to "value"

Question

I have it

<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>

and I want to select from point 1 to point 5 and wrap them in UL and select from 6 to 8 and wrap them in another.

<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>

How can i do this? Many thanks

Answer 1

<div>is not a valid child of <ul>. You must nest the elements <li>. As for selectors, you can use :gt()and :lt():

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

Answer 2

To create the correct HTML here, you also need to wrap them as list items, getting this result:

<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 , , divs, :

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() <li> , .wrapAll() <ul>.

Answer 3

- ...

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

Answer 4

, :

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/