Question

我有以下html结构

<ul>
<li> 
    Text <label>1#</label> <input type="text" value="" />
</li>
    <li> 
    Text <label>2#</label> <input type="text" value="" />
</li>
    <li> 
    Text <label>3#</label> <input type="text" value="" />
</li>
    <li> 
    Text <label>4#</label> <input type="text" value="" />
</li>
    <li> 
    Text <label>5#</label> <input type="text" value="" />
</li>
<li> 
  <label>6#</label> 
</li>
   <label>7#</label> <input type="text" value="" />
</li>  
</ul>

我需要打开这个结构，从<ul> li开始，标签里面只有<label>。最终结果将是

<ul>
    <li>Text
        <label>1#</label>
        <input type="text" value="" />
    </li>
    <li>Text
        <label>2#</label>
        <input type="text" value="" />
    </li>
    <li>Text
        <label>3#</label>
        <input type="text" value="" />
    </li>
    <li>Text
        <label>4#</label>
        <input type="text" value="" />
    </li>
    <li>Text
        <label>5#</label>
        <input type="text" value="" />
    </li>
</ul>

<!-- DIVIDE -->
<ul>
    <li>
        <label>6#</label>
    </li>
    <li>
        <label>7#</label>
        <input type="text" value="" />
    </li>
</ul>

我试图使用.replace();的某些组合，没有进一步的尝试。有可能这样做吗？

DEMO CODE

Answer 1

有些不清楚预期结果是什么，并且还注意到您的HTML已损坏：元素＃7缺少开放li标记。因此，假设您要移出第一个li之后没有input和所有li元素的元素，并将这些li元素放在一个单独的元素中（新）ul，这里是代码：

var x = $('<ul>').insertAfter('ul');
var y = $('ul li:not(:has(>input))');
var z = $(y).nextAll();
$(y).appendTo(x);
$(z).appendTo(x);

小提琴：http://jsfiddle.net/FGJLg/3/

Answer 2

这是我的解决方案：

$("ul>li:not(:has(:not(label)))").each(function() {
    var li = $(this);   
    var newUl = $(document.createElement("ul"));
    li.parent().after(newUl);
    li.nextAll("li").andSelf().appendTo(newUl);
});

这适用于多个分隔符。

这里是小提琴：http://jsfiddle.net/LucasTrz/hWjLB/

Answer 3

我建议：

// select all the label elements:
$('label')
// filter that collection:
.filter(function () {
    // keeping only those 'label' elements that have no siblings:
    return $(this).siblings().length === 0;
})
// moving to the closest ancestor 'li' elements of those 'label' elements:
.closest('li')
// adding a specific class (for the next part):
.addClass('labelOnly')
// selecting all elements that follow, until another element with the added
// class-name is found:
.nextUntil('li.labelOnly')
// adding the original 'li' back to the selection:
.addBack()
// wrapping those 'li' elements in a 'ul':
.wrapAll('<ul></ul>')
// 'wrapAll()' returns the original (wrapped) elements, we use 'parent()'
// to get to the 'ul':
.parent()
// and append it to the body:
.appendTo('body');

JS Fiddle demo

参考文献：

Answer 4

$('li:not(:has(> input))').each(function () {
    var myList = $(this).parent('ul');
    var myEls = $(this).nextAll('li').andSelf();
    myEls.remove();
    myList.after(myEls);
    myEls.wrapAll('<ul>');
});

http://jsfiddle.net/isherwood/asn4L

更改<li> </li> </label>中仅包含<label>标签的标签

4 个答案: