1

我有一个输入字段、一个按钮和一个无序列表，里面有很多元素。我的想法是在输入字段中输入一个值，点击按钮，然后列表拆分为多个ul -s，其中小ul中的li数应该是输入中输入的值。

这就是我的 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');
        }
    }

我不明白为什么它不起作用。有人能指出我正确的方向吗？谢谢！

4

2 回答 2

1

你的'inputValue'不是可变的。

while((group = $bigList.find('li:lt(' + inputValue + ')').remove()).length){
            $('<ul/>').append(group).appendTo('#lists');
        }
于 2013-10-10T09:30:10.487 回答
0

您应该使用 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
}
于 2013-10-10T09:54:09.030 回答