克隆无法正常工作

Question

我正在尝试这段代码，但显然我有一些错误。

问题就在这里，因为没有这部分一切都可以正常工作：

        .find('ol:first >li:eq(0)')
        .attr('id', 'one' + increment)
        .find('ol:first >li:eq(1)')
        .attr('id', 'two' + increment)

完整源代码：

<div id="container">
<div id="input0" class="clonedInput">
<br>
    <ol id="vall0">
    <li id="one0">one</li>
    <li id="two0">two</li>
    </ol>
<input id="value0" size="20" type="text"/>
</div>
</div>

    <script type="text/javascript">
      $(document).ready(function() {
    var $container = $('#container'),

        $clone = $('#input0'),

        numClones = 4,

        startNumber = 1;

    function cloneInput(num, increment, $elem) {
        var $newElem = $elem
        .clone(true)
        .attr('id', 'input' + increment)
        .find('ol:first')
        .attr('id', 'vall' + increment)
        .find('ol:first >li:eq(0)')
        .attr('id', 'one' + increment)
        .find('ol:first >li:eq(1)')
        .attr('id', 'two' + increment)
        .end();

        $newElem.children(':text')
        .prop('id', "value" + increment)
        .prop('valor', 'valor')
        .val('');


        $container.append($newElem);

        if (num > 1) {
            var next = num - 1;
            var incr = increment + 1;
            cloneInput(next, incr, $elem);
        }
    }

    cloneInput(numClones, startNumber, $clone);
    });
        </script>

demo

Answer 1

一种可能的解决方案是将您的问题部分更改为：

.find('>li:eq(0)')
.attr('id', 'one' + increment)
.end()
.find('>li:eq(1)')
.attr('id', 'two' + increment)
.end()

另请参阅我的 jsfiddle。

Answer 2

.end() 可能没有按照您的想法进行操作。

您不需要在像这样的 jQuery 调用链的末尾调用它。

.end() 的作用是，它将有效地将您“弹出”回之前的过滤结果/范围。对 .find() 的后续调用将在当前过滤的元素之上执行选择。在进行额外的 .find() 调用之前尝试添加 .end() 调用：

    .clone(true)
    .attr('id', 'input' + increment).end()
    .find('ol:first')
    .attr('id', 'vall' + increment).end()
    .find('ol:first >li:eq(0)')
    .attr('id', 'one' + increment).end()
    .find('ol:first >li:eq(1)')
    .attr('id', 'two' + increment).end()

但是，我必须说您没有最有效地使用 jQuery 选择器...