循环通过节点子节点，用 <li /> 包装并用 JQuery 清理 HTML答案

【问题标题】：Looping thru node children, wrapping with <li /> & cleaning up HTML with JQuery循环通过节点子节点，用 <li /> 包装并用 JQuery 清理 HTML
【发布时间】：2013-02-20 13:30:18
【问题描述】：

“清理”此节点中的 HTML 的最佳方法是什么？

我想：

将<p> 标签包装在<div> 中（完成）
在第一个<input> - <label> 集合之后用<li> 标签包装每个节点
“清理”HTML：删除<br> 和&ndash;

我需要能够处理这两个 HTML 示例中的任何一个：

<p>
    <input type="checkbox" protocol="/" rel="TestNote" name="firsttodo" class="function-check" id="id_firsttodo">
    &nbsp;<label for="id_firsttodo">First To-Do</label>
    <br>
    &ndash; 2-List item 1<br>
    &ndash; 2-List Item 2<br>
    &ndash; 2 List Item 3
</p>
<p>
    <input type="checkbox" protocol="/" rel="TestNote" name="ndtodo" class="function-check" id="id_ndtodo">
    &nbsp;<label for="id_ndtodo">2nd To-Do</label>
    <br>
    &ndash; <input type="checkbox" protocol="/" rel="TestNote" name="sttodo" class="function-check" id="id_sttodo">
    &nbsp;<label for="id_sttodo">2)1st To-Do</label>
    <br>
    &ndash; <input type="checkbox" protocol="/" rel="TestNote" name="ndtodo" class="function-check" id="id_ndtodo">
    &nbsp;<label for="id_ndtodo">2)2nd To-Do</label>
</p>

我想要什么：

<div class="ToDo"> 
<p>
    <input type="checkbox" protocol="/" rel="TestNote" name="firsttodo" class="function-check" id="id_firsttodo">
    &nbsp;<label for="id_firsttodo">First To-Do</label>
    <li>2-List item 1</li>
    <li>2-List Item 2</li>
    <li>2 List Item 3</li>
</p>
</div>
<div class="ToDo">
<p>
    <input type="checkbox" protocol="/" rel="TestNote" name="ndtodo" class="function-check" id="id_ndtodo">
    &nbsp;<label for="id_ndtodo">2nd To-Do</label>
    <li><input type="checkbox" protocol="/" rel="TestNote" name="sttodo" class="function-check" id="id_sttodo">
    &nbsp;<label for="id_sttodo">2)1st To-Do</label></li>
    <li><input type="checkbox" protocol="/" rel="TestNote" name="ndtodo" class="function-check" id="id_ndtodo">
    &nbsp;<label for="id_ndtodo">2)2nd To-Do</label></li>
</p> 
</div>

到目前为止我的脚本：

<script>
$(document).ready(function(){
    $('p').each(function() {
        var L1 = $(this).children();
        for (var i = 2, len = L1.length; i < len; i++) { //skipping #s 0 & 1, want to keep them as is!
            var x = L1[i].nextSibling;
            if (x) {
                $(x).wrapAll('<li />');
            }
        }
        $(this).wrapAll('<div class="ToDo" />');
    })
});
</script>

我很确定removeChild() 将删除节点及其兄弟节点。所以我严重脑死亡。

有什么建议吗？

【问题讨论】：

一开始就没有办法改变HTML输出吗？
@Terry 不。我正在使用 wiki 并尝试设置“待办事项”系统，最终使用可拖动的 DIV。无论如何，HTML 已经设置好了。

标签： jquery loops replace children

【解决方案1】：

看起来你快到了。

http://jsfiddle.net/RpXBT/

添加

$(this).find('br').remove();

到最后。还剩下什么？我还删除了&nbsp; 的实例。最好使用 CSS 进行格式化。

label {margin-left: 6px;}

$(this).replace('&nbsp;', '');

哦，您的 LI 是无效的，除非它们被包装在 UL 中。

这是我得到的最接近的。我今天没时间了。祝你好运。 http://jsfiddle.net/RpXBT/2/

【讨论】：