克隆無法正常工作

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選擇的...