Question

以下是带有相关表HTML的jsFiddle。

我想使用jQuery突出显示或删除表格中包含某些关键字的部分。

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

现在，我可以使用

$("td:contains('pear')").parent().prev().nextUntil(".mark").css("background-color", "red");

完成我想要做的事情（突出显示由===分隔的所有部分，包含“pear”）。但是，对于分隔符行不在我正在搜索的文本之前的情况，如何使用prevAll执行此操作？我尝试了$("td:contains('pear')").parent().prevAll(".mark:first").nextUntil(".mark").css("background-color", "red");我觉得应该可行，但只突出了一个部分。我想我错过了一个关于jQuery如何处理我希望将prevAll()之类的动作映射到元素列表的情况的关键理解。

请忽略错误的表格布局;这就是我必须使用T_T

Answer 1

这应该有效：

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

请参阅：https://jsfiddle.net/aszepeshazi/9czm7g3y/2/

使用prevAll选择包含关键字

1 个答案: