jqueryjquery-selectorsjquery-traversing

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


Solution

  • 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/