2010-06-21 92 views
3

我有这个选择从“价值”到“价值”

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

,我想从项目项选择并包装成一个UL,并选择到并将它们包装在另一个中。

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

我该怎么做?非常感谢

+3

为什么你想失效完美的HTML? ; o) – deceze 2010-06-21 09:19:06

+1

只是位置,或者你会搜索'.text'?你知道他们被分类吗?如果价值不在那里呢? – Kobi 2010-06-21 09:23:32

回答

3

<div>不是<ul>的有效子元素。您应该嵌套<li>元素。至于选择,你可以使用:gt():lt()

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

+1为通知错误的HTML标记,他后:) – Sarfraz 2010-06-21 09:29:16

+0

谢谢大家的答案。我正在使用一个旧的CMS,我需要这样一个输出(顺便说一句,我不能改变如何打印HTML,所以我不能强制语义HTML,我做我能做的就是xDD) – liebgott 2010-06-21 09:40:24

0

像这样的事情将让你有...

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

现在,这是远远不够完善,但对于一个开始:

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转换为过滤器集合的插件,你跃跃欲试要检查fromto,并且可能只拨打$('.item')一次。
我认为这足以让你走了。

工作例如:http://jsbin.com/ehite4/

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,这.wrap() s 每个元素在<li>然后使用.wrapAll()<ul>包装组。

+0

+1 ,尼克。我使用[我的答案]中给出的选择器添加了[快速更新](http://jsfiddle.net/mX8bx/1/)(http://stackoverflow.com/questions/3083365/select-from-value-对值/ 3083416#3083416)。当然,如果将10个以上的元素分成5个元素,那么你的灵活性会更高一些。 – 2010-06-21 11:15:18