輸入值設置後，在多個小列表中分割列表 - jquery

Question

我有一個輸入字段，一個按鈕和一個無序列表，裏面有很多元素。我的想法是，進入輸入一個值歸檔，按下按鈕後，該列表分成多個UL -s，其中李在小UL數值應該是在輸入進入。

這是我的HTML看起來像

 <input type="text" class="input-value" onfocus="this.select();" onblur="this.value=!this.value?'Enter number':this.value;" value="Enter number"/> 
     <button type="button" id="push" onclick="appendInput()">push me</button> 

     <div id="todo"></div> 
     <div id="lists"> 
      <ul id="big-list"> 
       <li>List item no. 1</li> 
       <li>List item no. 2</li> 
       <li>List item no. 3</li> 
       <li>List item no. 4</li> 
       <li>List item no. 5</li> 
       <li>List item no. 6</li> 
       <li>List item no. 7</li> 
       <li>List item no. 8</li> 
       <li>List item no. 9</li> 
       <li>List item no. 10</li> 
       <li>List item no. 11</li> 
       <li>List item no. 12</li> 
       <li>List item no. 13</li> 
       <li>List item no. 14</li> 
      </ul>   
     </div> 

這是jQuery的部分

function appendInput() { 
     $('#todo').html($('.input-value').val()); 
     var inputValue = $("#todo").html(); 
     var $bigList = $('#big-list'), group; 
     while((group = $bigList.find('li:lt(inputValue)').remove()).length){ 
      $('<ul/>').append(group).appendTo('#lists'); 
     } 
    } 

我不明白爲什麼它不工作。有人能指出我正確的方向嗎？謝謝！

Answer 1

您的'inputValue'不可變。

while((group = $bigList.find('li:lt(' + inputValue + ')').remove()).length){ 
      $('<ul/>').append(group).appendTo('#lists'); 
     } 

Answer 2

你應該使用Javascript來操作數據。這將更容易維護，但如果您關心性能，因爲您操作DOM的頻率較低，這也是更好的選擇。

var list = [ 
    'List item no. 1', 
    'List item no. 2', 
    'List item no. 3', 
    'List item no. 4', 
    'List item no. 5', 
    'List item no. 6', 
    'List item no. 7', 
    'List item no. 8', 
    'List item no. 9', 
    'List item no. 10', 
    'List item no. 11', 
    'List item no. 12', 
    'List item no. 13', 
    'List item no. 14' 
]; 

function updateLists() { 
    var i = 0, 
     html = [], 
     slice = parseInt($('.input-value').val()); 
    while (i < list.length) { 
     html.push(
      '<ul><li>', 
      list.slice(i, i + slice).join('</li><li>'), 
      '</li></ul>' 
     ); 
     i += slice; 
    } 
    $('#lists').html(html.join('')); // a single DOM query 
}