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

标签 jquery

我已经解决了我原来的问题(痛苦地),但想知道是否有更好的解决方案(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>

最佳答案

尝试

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

演示:Fiddle

关于jquery - 如何使用 jQuery 选择包含特定文本的子元素的父元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16454109/

相关文章:

javascript - 如何让tinymce默认粘贴纯文本

javascript - angularjs ng-重复来自不同 i18n 文件的下拉值

javascript - 获取 li 有一个类且没有另一个类的索引

javascript - 每 250 MS 更新一次变量值

javascript - 检索 POST JSON 响应

javascript - 滚动一个div后水平滚动需要停止

jquery - 为什么基于 window.scrolltop 调整 css 可以一致工作,而 animate 却不能?

javascript - 单击时包含基于 HTML 的 Blade View

javascript - jQuery 粘性边栏失败 : throws sidebar out of position

javascript - 许多类似的没有 ID 的 AJAX 建议框