CODEWITHSUNDEEP
javascriptjquery
Maximus S
Maximus S

Reputation: 11095

How does "newElements" work in Javascript?

$container.infinitescroll({
        navSelector  : "div.navigation",
        nextSelector : "div.next-page a:first",   
        itemSelector : "#posts-container div.post",
        bufferPx     : 80
        },
        function( newElements ) {
            var $newElems = $ ( newElements );
            $container.masonry( 'appended', $newElems );
        }
);

While implementing infiniteScroll plugin, I used newElements without actually knowing what it really is. In the presented code, I passed newElements in as a parameter but it wasn't declared anywhere above. However, the function works fine; new posts elements are stored in $newElems.

When I use newElements, am I conveniently calling all the newly added elements to the DOM?

Upvotes: 1

Views: 169

Answers (2)

Jordi Jolink
Jordi Jolink

Reputation: 451

First of all, read the documentation of this plugin: http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

As you can see, the comments on the callback function describe:

function(arrayOfNewElems){
    // optional callback when new content is successfully loaded in.

    // keyword `this` will refer to the new DOM content that was just added.
    // as of 1.5, `this` matches the element you called the plugin on (e.g. #content)
    // all the new elements that were found are passed in as an array
}

This means, the newElements parameter of your callback function does actually contain (an array of) all the newly added elements.

The reason that newElements does not have to be declared before, is that it is a function argument. More on functions can be found here: http://www.w3schools.com/js/js_functions.asp

Upvotes: 1

BenM
BenM

Reputation: 53198

newelements isn't anything in JavaScript. It's a variable that is passed to the callback function when new items are loaded.

You should probably read over the documentation of InfiniteScroll, which clearly details this function:

function(arrayOfNewElems){

     // optional callback when new content is successfully loaded in.

     // keyword `this` will refer to the new DOM content that was just added.
     // as of 1.5, `this` matches the element you called the plugin on (e.g. #content)
     //                   all the new elements that were found are passed in as an array
}

You could assign any name to the callback parameter, but it will contain an array of the new elements.

Upvotes: 4

Related Questions