Question

我有一个输入字段，一个按钮和一个包含大量元素的无序列表。我的想法是在输入字段中输入一个值，点击按钮，然后列表分成多个 ul -s，其中 li 的数量为< strong> 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
}

设置输入值后，在多个小列表中拆分列表 - Jquery

2 个答案: