用Ul包裹李

时间:2016-12-13 02:22:04

标签: javascript jquery html css

我使用Jquery构建了以下HTML。我现在想把李包裹在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完成,因为我无法对此进行硬编码。感谢

1 个答案:

答案 0 :(得分:0)

如果你想要除了第一个之外的所有li,你可以使用它:

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/