克隆无法正常工作

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