jquery - 在 jQuery 中，如何找到包含特定文本的单元格的行？

Question

我有以下 HTML 表格...

<table>
    <tr id="result1">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result2">
        <td class="title">Apple</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result3">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result4">
        <td class="title">Lemon</td>
        <td>12</td>
        <td>37</td>
    </tr>
</table>

假设我有第一行......

var $tr = $('#result1');
var title = $tr.find('td.title').text();

如何在 jQuery 中找到表中所有其他具有 TD 单元格的行，该单元格的类为“title”，其文本与我的“title”变量中的文本匹配？请注意，在上面的示例中，唯一的结果将是 id="result3" 的行。

标签： jquerycss-selectorsmatching

Answer 1

您只需将建议的:contains()选择器与parent()or结合起来parents()。检查下面的代码。

var selector = $("td:contains('Orange')").parent('tr');
$(selector).addClass('highlighted');

.highlighted {
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr id="result1">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result2">
        <td class="title">Apple</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result3">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result4">
        <td class="title">Lemon</td>
        <td>12</td>
        <td>37</td>
    </tr>
</table>