jquery - 如何使用 jQuery 选择包含特定文本的子元素的父元素

Question

我已经解决了我原来的问题(痛苦地)，但想知道是否有更好的解决方案(jQuery 必须有更好的方法来做到这一点)。我正在使用嵌套表(SharePoint)并尝试选择子单元格包含特定文本的行。我在下面编写了一个简化的示例(也在 jsFiddle 上:http://jsfiddle.net/tpZyn/6/)

在此示例中，我尝试将“red-row”类添加到包含文本“(红色)”的单元格行(请记住，我的最终目标是选择所需的行...它们是红色的只是证明我已经选择了它们的一种方式)，但是我尝试过的所有选择器最终选择的行数都超过了所需的行数。我最终求助于一个过滤器函数来完成我需要做的事情，但这似乎有点尴尬。看来应该有更好的方法。

<style>
.red-row {
    background-color: #FF0000;
}
</style>
<script>
$(document).ready(function () {
    //$('td:contains("(red)")').parent("tr:first").addClass('red-row');
    //$('td>:contains("(red)")').parent().addClass('red-row');
    $('td').filter(function(){var bob = $(this).text().indexOf("(red)"); return (bob > -1 && bob < 10);}).parent().addClass('red-row');
});
</script>

    <table>
            <tbody>
                <tr>
                    <td colspan="2">
                        <h1>My Header</h1>
                    </td>
                </tr>
                <tr>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                     <h2>Left Column</h2>

                                </td>
                                <td>
                                     <h2>Right Column</h2>

                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>(red) Apple</td>
                                                <td>$3</td>
                                            </tr>
                                            <tr>
                                                <td>(yellow) Banana</td>
                                                <td>$2</td>
                                            </tr>
                                            <tr>
                                                <td>(yellow) Lemon</td>
                                                <td>$1</td>
                                            </tr>
                                            <tr>
                                                <td>(red) Cherry</td>
                                                <td>$2</td>
                                            </tr>
                                            <tr>
                                                <td>(yellow) Quince</td>
                                                <td>$3</td>
                                            </tr>
                                            <tr>
                                                <td>(green) Apple</td>
                                                <td>$4</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td>
                                    <p>Some other content</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </tr>
            </tbody>
        </table>

Answer 1

尝试

$('td:contains("(red)")').not(':has(table)').closest("tr").addClass('red-row');

演示:Fiddle