用 Ul 包裹 Li答案

【问题标题】：Wrap Li with Ul用 Ul 包裹 Li
【发布时间】：2016-12-13 10:29:08
【问题描述】：

我使用 Jquery 构建了以下 HTML。我现在想将 li 包装在 UL 中。

<div class="panel panel-primary" style="height:200px;overflow-y:scroll;width:100%;">
<div class="panel-body">
    <div id="CommonResults">
        <ul id="Common_container">
            <li class="commmonItems" id="CommonColumns">
            <input name="ColumnAlarm_group" disabled="" type="checkbox" checked="" value=" CommonAlarms "> CommonAlarms 
                <li class="columnItem"><input name="Column_Group" type="checkbox" value="ACD">Acknowledged</li>
                <li class="columnItem"><input name="Column_Group" type="checkbox" value="ACT">ActorID/OperatorID</li>
                <li class="columnItem"><input name="Column_Group" type="checkbox" value="ACV">Active</li>
                <li class="columnItem"><input name="Column_Group" type="checkbox" value="ARD">Acknowledge Required</li>
                <li class="columnItem"><input name="Column_Group" type="checkbox" value="COND">Condition</li>
                <li class="columnItem"><input name="Column_Group" type="checkbox" value="ENB">Enabled</li>
            </li>
        </ul>
    </div>
</div>

完成后应该是这样的。

<div class="panel panel-primary" style="height:200px;overflow-y:scroll;width:100%;">
    <div class="panel-body">
        <div id="CommonResults">
            <ul id="Common_container">
                <li class="commmonItems" id="CommonColumns">
                <input name="ColumnAlarm_group" disabled="" type="checkbox" checked="" value=" CommonAlarms "> CommonAlarms 
                    <ul><!-- After change -->
                        <li class="columnItem"><input name="Column_Group" type="checkbox" value="ACD">Acknowledged</li>
                        <li class="columnItem"><input name="Column_Group" type="checkbox" value="ACT">ActorID/OperatorID</li>
                        <li class="columnItem"><input name="Column_Group" type="checkbox" value="ACV">Active</li>
                        <li class="columnItem"><input name="Column_Group" type="checkbox" value="ARD">Acknowledge Required</li>
                        <li class="columnItem"><input name="Column_Group" type="checkbox" value="COND">Condition</li>
                        <li class="columnItem"><input name="Column_Group" type="checkbox" value="ENB">Enabled</li>
                    <ul><!-- After Change -->
                </li>
            </ul>
        </div>
    </div>
</div>

获得所需结果的任何帮助或指导。需要使用 JavaScript/JQuery 完成，因为我无法对此进行硬编码。谢谢

【问题讨论】：

This 应该回答你的问题。
您不能以无效的 html 开头...<li> 不是<li> 的有效子代。这是一个 XY 问题。这首先是如何生成为无效的 html 的？你需要在那里修复它
你想怎么实现呢？即点击一个按钮？
它会点击一个按钮
charlietfl 因为列表是动态构建的，并且在两列之间对其进行排序，因此构建的列表是无效的 HTML，这就是我试图使其成为有效 HTML 的原因。实际代码太长，我无法放在这里。

标签： javascript jquery html css

【解决方案1】：

如果你想取除第一个之外的所有lis，你可以使用这个：

var els = [];
$("#CommonResults ul li:gt(1)").each(function(){
  els.push($(this));
  $(this).remove();
});
var ul = $("<ul></ul>");
for(var i = 0; i < els.length; i++){
  ul.append(els[i]);
}
$("#Common_container").append(ul);

https://jsfiddle.net/330juLmn/

【讨论】：