Question

I’m trying to find a way to count elements that are a head of a certain class name. I have the following:

$('.active').each(function(index,item){
  var nextDiv = $(item).next();
  var followingDiv = $(nextDiv).next('a');
  $(item).wrap("<div id='window" + index + "'></div>");
  $("#window"+index).append(nextDiv).append(followingDiv);
});

This works all right, it only grabs two elements which are 'a' tags ahead of the active item which in this case is '.active' and wraps them in a div called 'window'.

What i want to figure out how to do is add more than just two elements a head of the active class and store that in a variable instead of making 10 variables that keep say .next('a').next('a') etc... Then having to append all those newly created variables like:

$("#window"+index).append(nextDiv).append(followingDiv).append(another-a).append(another-a-again)…

I believe there should be a simpler way to count a specified number of elements a head of a certain class name without having to recreate lots of variables.

Answer 1

I think you want .nextAll() ^[docs]:

Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

var as = $(this).nextAll('a');

Update: Forgot the max limit. You can use .slice() ^[docs] for that:

var as = $(this).nextAll('a').slice(0,10);

Your whole code would be:

$('.active').each(function(index,item){
  $(this).nextAll('a').slice(0,10)
      .add(this)
      .wrap("<div id='window" + index + "'></div>");
});

Maybe nextUntil ^[docs] is also interesting for you if you want to group all .active elements with their following links.