Question

这听起来很简单，它应该是，但它似乎并没有如此剪切和干燥......

我有一个li元素列表..

<li>Text here</li>
<li>Text here</li>
<li>Text here</li>

我想要做的是找到第一个，在它之前添加<ul>。找到最后一个，添加</ul>

听起来很简单，但和我在一起......

首先我尝试了这个：

$('li').each(function(i,obj) {
  var x = $(this);
  if(x.prev().prop('tagName')!=='LI') x.before('<ul>')    
  if(x.next().prop('tagName')!=='LI') x.after('</ul>')    
});

进化到了这个：

$('li').each(function(i,obj) {
  var x = $(this);
  $.fn.outerHTML = function(){
    var x = $(this);
    x.wrap('<p/>')
    var html = x.parent().html();
    x.unwrap();
    return(html);
  }

  alert(x.outerHTML());
  if(x.prev().prop('tagName')!=='LI') x.html('<ul>'+x.outerHTML())    
  if(x.next().prop('tagName')!=='LI') x.html(x.outerHTML()+'</ul>')  

});

第一个代码在第一个LI（结束标记和全部）之前放置一个空UL

第二次只包裹第一个LI。

它在列表1,2,3下面并且似乎正确报告...某些东西（可能是jQuery）似乎正在改变我的代码。谁能在这里找到一些见解？

小提琴：http://jsfiddle.net/yr67N/

更新从代码中可以看出，li必须组合在一起。 wrapAll在这里不起作用。

Answer 1

只是在你的小提琴上尝试过它，它似乎有效：

var collectedLi = [];
$('li').each(function(){
    collectedLi.push(this);
    if(!$(this).next().is('li')){
        $(collectedLi).wrapAll('<ul/>');
        collectedLi = []
    }
});

对于每个li，它将检查下一个元素是否也是li，如果不是，它将当前集合包装在ul中，然后清空集合以继续循环。

刚才意识到上面的代码也会包装已经包装好的li标签，这里有一个解决方案可以解决这个问题：

var collectedLi = [];
$('li').each(function(){
    collectedLi.push(this);
    if(!$(this).next().is('li')){
        if(!$(this).parent().is('ul')){
            $(collectedLi).wrapAll('<ul/>');
        }
        collectedLi = []
    }
});

Answer 2

怎么样：

$('li').wrapAll('<ul/>');

Fiddle

Answer 3

var ul,
    tname;
$('li').each(function(i, el){

    tname = $(el).prev().prop('tagName');

    if(String(tname) !== 'UL'){
        ul = $('<ul></ul>');
        $(el).before(ul[0]);
    }
       $(this).appendTo(ul);

});

fiddle

为LI添加UL标记的问题

3 个答案: