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 に答える