0

I am loading some content with infinite scroll. I would like to change the border on every .post that was loaded. I've got a function in the callback, like so:

$('#index-container').infinitescroll({
    loading: {
        finishedMsg: " ",
        img: "http://i.imgur.com/6SXXf7L.gif",
    },
    behavior: undefined,
    binder: $(window), // used to cache the selector for the element that will be scrolling
    nextSelector: "#next-page",
    navSelector: "#footer",
    itemSelector: ".post",
    dataType: 'html',
}, function() {
    $('.post').css('border', '5px solid red'); // my function

});

However, once this has called, it affects everything (even content not loaded by infinite scroll). Is there a way I can only target newly loaded content?

2 Answers2

0

If the posts was added one at a time, you can identify the new post like this

$('.post').last().css('border', '5px solid red');
Fabricator
  • 12,722
  • 2
  • 27
  • 40
  • Thanks, but that was just a bad example by me. I was hoping there'd be a function that can be applied the the `data`, like there is on an AJAX call. –  Jun 10 '14 at 18:17
0

I think I found a solution. The data is passed through the parameter in the callback, like so:

$('#index-container').infinitescroll({
    loading: {
        img: "http://i.imgur.com/6SXXf7L.gif",
    },
    nextSelector: "#next-page",
    navSelector: "#footer",
    itemSelector: ".post"
}, function(data) { // 'data'
    data.find('.post').css('border', '5px solid red'); // would probably work.

});

Exampled here, when combining infinitescroll with masonry.

Community
  • 1
  • 1