Question

<html>

<head>
    <script src="js/jquery.min.js"></script>
    <style>
            button {padding: 20px;}
    </style>

    <script>
$(document).ready(function() {

    var app = {

        start: function() {
            /* do something */
            var obj = [{
                "id": 0,
                "firstname": "John",
                "lastname": "Doe",
                "email": "jdoe@email.com"
            }, {
                "id": 1,
                "firstname": "Mary",
                "lastname": "Smith",
                "email": "msmith@gmail.com"
            }, {
                "id": 2,
                "firstname": "Paul",
                "lastname": "Frances",
                "email": "peeps1@yahoo.com"
            }, {
                "id": 3,
                "firstname": "Frances",
                "lastname": "Paul",
                "email": "hellokitty@hotmail.com"
            }, {
                "id": 4,
                "firstname": "Alex",
                "lastname": "Paul",
                "email": "hellokitty@hotmail.com"
            }, {
                "id": 5,
                "firstname": "Harold",
                "lastname": "Miller",
                "email": "miller@hotmail.com"
            }, {
                "id": 6,
                "firstname": "Trina",
                "lastname": "Torres",
                "email": "ttorres@hotmail.com"
            }, {
                "id": 7,
                "firstname": "Alice",
                "lastname": "Rogers",
                "email": "alice1@hotmail.com"
            }, {
                "id": 8,
                "firstname": "Beth",
                "lastname": "Peters",
                "email": "whome@hotmail.com"
            }];
            console.log('obj: ', obj)

            $.each(obj, function(index, item) {

                $('.test')
                  .append(item.email + '</h3>')
                  .append(item.firstname + '<br/>')
                  .append(item.lastname + '<br/>')

                console.log('Index' + index);

                if (index === 4) {
                    nextIndex = index + 1;
                    return false;

                    console.log('Next Index: ' + nextIndex);

                };
            });

            $('.load-data').click(function() {

                $.each(obj, function(nextIndex, item) {
                    console.log('nextIndex: ' + nextIndex);
                    $('.test')
                      .append(item.email + '</h3>')
                        .append(item.firstname + '<br/>')
                        .append(item.lastname + '<br/>')

                    //console.log('Index' +nextIndex);

                });

            });

        }

    };

    app.start();
});
</script>
</head>


<body>
<div class="test"></div>
<button class="load-data">Load More</button> 
</body>
</html>

Answer 1

我有几分钟，还有一些边缘性失眠，所以我想我会提供这种方法，基本上使用slice()：

$(document).ready(function () {

    var app = {
        // all but the first object removed, for brevity
        'data': [{
            "id": 0,
                "firstname": "John",
                "lastname": "Doe",
                "email": "jdoe@email.com"
        }],
            // setting and caching local variables:
            'outputTo': document.querySelector('.test'),
            'loadSize': 4,
            'loadFrom': 0,
            'append': function () {
            // creating elements to use later:
            var frag = document.createDocumentFragment(),
                span = document.createElement('span'),
                div = document.createElement('div'),
                tmp1, tmp2, tmp3, wrap;
            // taking the data object from above,
            // slicing it from the loadFrom index to the loadFrom + loadSize index,
            // iterating over those elements using forEach:
            this.data.slice(this.loadFrom, this.loadFrom + this.loadSize).forEach(function (a) {
            // I *really* wish I could have thought of a way to abbreviate
            // this section; it feels horrible...

                // caching temporary elements:
                tmp1 = span.cloneNode();
                // setting classnames on temporary elements for styling (if required):
                tmp1.className = 'email';
                tmp2 = span.cloneNode();
                tmp2.className = 'firstname';
                tmp3 = span.cloneNode();
                tmp3.className = 'lastname';
                wrap = div.cloneNode();

                // appending the relevant text to the temporary elements:    
                tmp1.appendChild(document.createTextNode(a.email));
                tmp2.appendChild(document.createTextNode(a.firstname));
                tmp3.appendChild(document.createTextNode(a.lastname));

                // appending children to the 'wrap' element:
                wrap.appendChild(tmp1);
                wrap.appendChild(tmp2);
                wrap.appendChild(tmp3);

                // then appending the wrap element to the documentFragment:
                frag.appendChild(wrap);
            });

            // setting the index for the next run of the function:
            this.loadFrom = (this.loadFrom + this.loadSize);
            // appending the created elements (wrapped in the documentFragment)
            // to the designated output-element:
            this.outputTo.appendChild(frag);
        }

    };
    // calling the function:
    app.append();
    // binding the function to the click-event of the '.load-data' button,
    // using 'bind(app)' to ensure that 'this' within the function refers
    // to the 'app', *not* the element upon which the handler was triggered:
    document.querySelector('.load-data').addEventListener('click', app.append.bind(app));
});

JS Fiddle demo

参考文献：

如何使用Jquery每次单击从同一对象加载另外4个项目

1 个答案: