jquery - 循环通过节点子节点，用& 使用 JQuery 清理 HTML

Question

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

我想要：

• <p>将标签包裹在<div>（完成）中
• 用标签包裹第一个节点之后的每个<input>节点<label><li>
• '清理' HTML：删除<br>和–

我需要能够处理这两个 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()会删除节点和它的兄弟姐妹。所以我严重脑死亡。

有什么建议么？

Answer 1

看起来你快到了。

http://jsfiddle.net/RpXBT/

添加

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

到最后。还剩下什么？我还删除了 . 使用 CSS 进行格式化要好得多。

label {margin-left: 6px;}

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

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

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