What's an easy way to iterate x number of times using next() (applying the same function each time)?

I am working in Sharepoint and have limited control of the HTML; what I can do is find an element by its ID, track down the closest <td>, hide() it, and then move on to the next one (I don't want all the <td>'s, just about 7 or 8 in a row).

The code below works but it's not that pretty.

$("#my-easily-identifiable-id").closest("td").hide();
$("#my-easily-identifiable-id").closest("td").next().hide();
$("#my-easily-identifiable-id").closest("td").next().next().hide();
$("#my-easily-identifiable-id").closest("td").next().next().next().hide();
[ ... etc ... ]

What's a better way to do this?

Thanks

PS: added a fiddle (genius)

What's an easy way to iterate x number of times using next() (applying the same function each time)?

I am working in Sharepoint and have limited control of the HTML; what I can do is find an element by its ID, track down the closest <td>, hide() it, and then move on to the next one (I don't want all the <td>'s, just about 7 or 8 in a row).

The code below works but it's not that pretty.

$("#my-easily-identifiable-id").closest("td").hide();
$("#my-easily-identifiable-id").closest("td").next().hide();
$("#my-easily-identifiable-id").closest("td").next().next().hide();
$("#my-easily-identifiable-id").closest("td").next().next().next().hide();
[ ... etc ... ]

What's a better way to do this?

Thanks

PS: added a fiddle (genius)

• javascript
• jquery
• iterator
• jquery-selectors

• 1 Can you post some sample html that this would be working on (in a fiddle)? – Michael Haren Commented Oct 7, 2011 at 19:30
• check out api.jquery./nextUntil – Billy Moon Commented Oct 7, 2011 at 19:32
• @MichaelHaren I've been away too long - I didn't even know about fiddle! That is amazing. Posted and updated my post. – thornomad Commented Oct 11, 2011 at 16:15

4 Answers 4

Use .nextAll() + .andSelf() with .slice().

$("#my-easily-identifiable-id").closest("td").nextAll().andSelf().slice(0, 7);

I think a simpler solution than those posted so far would be .nextUntil():

//to get next 8 elements
var i = $('#my-easily-identifiable-id').index();
$('#my-easily-identifiable-id').closest('td').nextUntil('', ':lt(' + (i+8) + ')');

//to get self and next 3
var i = $('#my-easily-identifiable-id').index();
$('#my-easily-identifiable-id').closest('td').nextUntil('', ':lt(' + (i+3) + ')').andSelf();

Grabs all "next" elements until the filter is hit (in this case we choose the next 8 elements). Verified by jsFiddle.

I've not tried it, but perhaps the following might work (I'll test momentarily):

$("#my-easily-identifiable-id").siblings().slice($(this).index(),($(this).index() + 8)).hide();

Tested and verified with a JS Fiddle demo.

Maybe something like this:

$("#my-easily-identifiable-id").closest("td").hide();
$("#my-easily-identifiable-id").closest("td").nextAll().hide();