如何使用jquery移动嵌套元素

How to move nested elements using jquery

本文关键字:嵌套 元素 移动 jquery 何使用      更新时间:2023-09-26

我正在尝试移动嵌套列表。当父节点被选中时,子节点也应该被移动。当选择了子元素时,应该复制父元素并移动子元素,这样结构才会被保留。有人可以给我指出正确的方向,当我开始编码时,它变得过于复杂。

下面是一个使用的示例,没有嵌套。http://jsfiddle.net/EEhbQ/html:

 <ul id="select1">
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0" />Checkbox 1</label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_1" />Checkbox 2</label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_2" />Checkbox 3</label>
    </li>
</ul>
<ul id="select2">
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup2" value="checkbox" id="CheckboxGroup2_0" />Checkbox 4</label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup2" value="checkbox" id="CheckboxGroup2_1" />Checkbox 5</label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="CheckboxGroup2" value="checkbox" id="CheckboxGroup2_2" />Checkbox 6</label>
    </li>
</ul>
<a href="#" id="add">add</a>
<a href="#" id="remove">remove</a>
Jquery:

 $('#add').click(function() {
    return !$('#select1 li :checked').closest('li').appendTo('#select2');
});
$('#remove').click(function() {
    return !$('#select2 li :checked').closest('li').appendTo('#select1');
});

你在找这样的东西吗?——http://jsfiddle.net/jayblanchard/EEhbQ/18/

$('#add').click(function () {
    return !$('#select1 li :checked').closest('ul').appendTo('#select2');
});
$('#remove').click(function () {
    return !$('#select2 li :checked').closest('ul').prependTo('body');
});