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 < / em>并将它们包装在另一个中。

<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个元素进行包装/分组，最后剩下的就是你可以使用的任意数量的div：

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>");
}

You can see a working demo here，<li>中的.wrap()个每个元素然后使用<ul>中的.wrapAll()封装群组。< / p>

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/

从“值”到“值”选择

4 个答案: