Question

I have a series of rows with different classes.

<tr class="head">...
<tr class="group">...
<tr class="item">...
<tr class="item">...
<tr class="item">...
<tr class="group">...
<tr class="item">...
<tr class="item">...
<tr class="item">...
<tr class="group">...
<tr class="item">...
<tr class="item">...
<tr class="item">...

Assuming my context is at one of the items, how do I select all the rows before, after and including it, that are items, without crossing over a group?

In this example, no matter what item row I am at, I should always result in a collection of three item rows.

Currently I have this, and while it works, I’m hoping there is a cleaner way.

var $itemRows = $targetRow.prevUntil('tr.group').add($targetRow.nextUntil('tr.group')).add($targetRow);

Something like .siblings('tr.item') but that will get all nine items, instead of the three contigous ones. And I can’t put these in tbodies, as this is already in a tbody and nesting them is invalid html.

I have improved it to

var $itemRows = $targetRow.prevAll('tr.group:first').nextUntil('tr.group');

Answer 1

Assuming this is one of the rows (and not a group), you could do this:

After testing out many scenarios, this is what I found worked:

$(this).prevUntil('tr.group').andSelf().nextUntil('tr.group').andSelf()

The issue is that when you click on the first item in a group, other combinations like gdoron’s didn’t work for me.

You can see this one work here: http://jsfiddle.net/jfriend00/mks74/

---

I thought there must be a bit cleaner way, so I kept working on it and this is what I found:

$(this).prevAll('tr.group:first').nextUntil('tr.group')

You can see this one work here: http://jsfiddle.net/jfriend00/HZVnX/

---

What would be useful here (which jQuery does not seem to provide) is a jQuery method that gets the prior sibling that meets some selector criteria. We could make our own like this:

jQuery.fn.prior = function(selector) {
    return (this.pushStack(this.prevAll(selector).first()));
};

And, then the code to solve this issue becomes a little more logical to read:

$(this).prior('tr.group').nextUntil('tr.group')