I'm trying to target the next instance of a certain div in a click function.
Here's a jsfiddle: http://jsfiddle.net/wUEkE/1/
jQuery:
$(document).ready(function(){
$(".listings-item").click(function() {
$('.hidden').next($('.hidden').removeClass('hidden').addClass('preview-listing').hide().delay(400).fadeIn("slow"));
$('#listings-wrap').masonry('reload');
});
});
So what I'm trying to achieve is by clicking on a .listing-item will target the next instance of .hidden and change the class to show it in the masonry grid. Currently though, on the click, both instances of .hidden are being shown and not just the relevant next instance. I can't figure out why this is. I will soon be appending content to this relevant div, but for now I'm just trying to get this to work, which I can't.
For this you can use the nextAll function, which returns all the next siblings. If you add a selector to it for the first hidden element then you will get the next hidden element relative to the div that is clicked.
Like this:
$(this).nextAll('.hidden:first')
Which in full use with your example looks like this:
$(".listings-item").click(function() {
$(this).nextAll('.hidden:first').removeClass('hidden').addClass('preview-listing').hide().delay(400).fadeIn("slow");
$('#listings-wrap').masonry('reload');
});