Here's the jsFiddle with the relevant table HTML.
I want to use jQuery to highlight or remove sections of a table if they contain certain keywords.
<table>
<tr class="mark"></tr>
<tr><td>apple</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr class="mark"></tr>
<tr><td>pear</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr class="mark"></tr>
<tr><td>apple</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr class="mark"></tr>
<tr><td>pear</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr class="mark"></tr>
<tr><td>apple</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr class="mark"></tr>
<tr><td>pear</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr class="mark"></tr>
<tr><td>apple</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
</table>
Right now, I can use
$("td:contains('pear')").parent().prev().nextUntil(".mark").css("background-color", "red");
to accomplish what I want to do (highlight all sections, delimited by ===
, that contain "pear"). But how can I do this with prevAll
for the cases where the delimiter row isn't directly previous to the text I'm searching for? I tried $("td:contains('pear')").parent().prevAll(".mark:first").nextUntil(".mark").css("background-color", "red");
which I think should work, but only one section is highlighted. I think I'm missing a key piece of understanding about how jQuery deals with situations where I want to map actions like prevAll()
to a list of elements.
Please ignore the bad table layout; this is simply what I have to work with T_T
This should work:
$("td:contains('pear')").parent().each(function() {
$(this).prevAll(".mark:first").nextUntil(".mark").css("background-color", "red");
});