更改只有<标签>标记在<李>

Changing tags that have only <label> tag within <li>

本文关键字：lt gt 标签      更新时间：2023-09-26

我有以下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();的一些组合，但没有进一步的尝试。有可能做到这一点吗？

演示代码

这是我的解决方案：

$("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/

还不清楚所需的结果是什么，还要注意您的HTML已经损坏：元素#7缺少一个打开的li标记。因此，假设您想移出第一个没有input的li和之后的所有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);

Fiddle：http://jsfiddle.net/FGJLg/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演示。

参考文献：

  • CCD_ 10
  • CCD_ 11
  • appendTo()
  • closest()
  • filter()
  • parent()
  • CCD_ 16
$('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

相关文章：