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()的后续调用将在当前过滤的元素之上执行选择。在进行其他.end()来电之前，请添加.find()来电：

.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选择器......

克隆无法正常工作

2 个答案: