javascript - WrappInner 嵌套要附加的项目，而克隆作为对象返回

Question

我正在尝试克隆现有对象并将其包装到 <li>然后获取该复选框的 value 属性并将其转换为字符串。

不幸的是，我无法弄清楚，首先，当我尝试克隆它时，它作为一个对象返回；其次，我无法用 <li> 正确包装。标签，我尝试附加的所有项目都被嵌套到另一个级别。

你可以在这里看到我的 fiddle :http://jsfiddle.net/2FLkS/1/

这是我正在工作的代码:

$('document').ready(function(){
    var list1 = $('#list1 .wrap-item');
    list1.click(function(){
        var cloneItem = $(this).find('input[type=checkbox]').clone();
            cloneItem = cloneItem + cloneItem.prop('value');
        $("#selected-items").append(cloneItem).wrapInner('<li></li>');
    })
});

Answer 1

试试这个:

<div id="list1">
    <div class="wrap-item">
        <label>
            <input type="checkbox" name="water" value="Water Element">Water</label>
    </div>
    <div class="wrap-item">
        <label>
            <input type="checkbox" name="water" value="Fire Element">Fire</label>
    </div>
    <div class="wrap-item">
        <label>
            <input type="checkbox" name="water" value="Earth Element">Earth</label>
    </div>
</div>
<div id="list2">
    <ul id="selected-items"></ul>
</div>
$('document').ready(function () {
    $('#list1 .wrap-item input').click(function () {
        var copy = $(this).parent().clone(),
            input = $(copy).find('input'),
            text = input[0].nextSibling.nodeValue,
            newText = input.val();
        input[0].nextSibling.nodeValue = newText;
        $('#selected-items').append($(copy).wrap('<li></li>').parent());
    })
});

<强> jsFiddle example