ky. ky. - 3 months ago 10
jQuery Question

Using prevAll to select all sections of a table containing a keyword

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

Answer

This should work:

$("td:contains('pear')").parent().each(function() {
  $(this).prevAll(".mark:first").nextUntil(".mark").css("background-color", "red");
});

See: https://jsfiddle.net/aszepeshazi/9czm7g3y/2/

Comments