Currently, my divs are loaded one by one on page load and everything is working perfectly. However, I encounter an issue when making an AJAX request and then using append(data) to the same container. In this scenario, my code ends up looping through all of the divs on the page instead of just the newly added ones.
So, my main concern is: how can I achieve the same .each() effect only on the new data received from a successful AJAX call?
Here's the jQuery snippet:
success: function(data){
$('#profileLinks').append(data);
$('.eachLink').each(function(i) {
$(this).fadeOut(0).delay(100*i).fadeIn(500);
});
}
And here's the corresponding HTML:
<div id="profileLinks" class="floatLeft">
<div class="eachLink floatLeft">Div 1</div>
<div class="eachLink floatLeft">Div 2</div>
</div>