iOS - insertAfter() not working after append()

Question

I have a dynamically loaded image gallery. Each image has a numeric data-id, and I want to sort them by ascending numbers. Then, because there are lots of them, I want to insert a 'back to top' button after every nth image. The following code works in FF, Chrome and Safari on desktop:

$(function() {
    var Arr = $('.card').get();
    var Arr = Arr.sort(function(a,b) {
    var aLoc = +$('.ad',a).data('id'),
     bLoc = +$('.ad',b).data('id')
     return aLoc < bLoc? -1:aLoc > bLoc? 1 :0
     })
    $('#class').append(Arr);  
    $('<div class = "top">TOP</div>').insertAfter('#class div:nth-child(4n)');
});

Fiddle here

Occasionally, though unpredictably as far as I can tell, it also works on iOS, but generally it fails. I have tried wrapping a setTimeout() function around the insertAfter(), but no difference.

I don't know if it's relevant, but the images are being lazy loaded once the array has been sorted and appended to the main div.

I'd be really grateful for any clues as to where I've gone wrong.

Thanks

EDIT: This is the lazy load function:

$("img.lazy").lazyload({
        threshold : 200
    });

It uses the lazyload plugin. In the working code, the lazy load function appears immediately after $('#class').append(Arr);

Answer 1

I think this might be an iOS8 issue - but changing :nth-child(n) to nth-of-type(n) seems to have fixed the problem. Maybe someone with more understanding of iOS might be able to explain what's going on.

See here:SO