如果一个div包含特定的文本字符串，如何编辑它的父元素css样式？

Question

我很乐意帮助您处理一个简单的jQuery脚本，用于搜索特定的文本字符串。如果该文本存在，则操作包含该文本的div的CSS样式表。HTML代码如下：

<div class="container">
    <div>
        <div class="heading">
            <a href="#">Very important text</a>
        </div>
    </div>
</div>

<div class="container">
    <div>
        <div class="heading">
            <a href="#">Not important at all</a>
        </div>
    </div>
</div>

<div class="container">
    <div>
        <div class="heading">
            <a href="#">Very important text</a>
        </div>
    </div>
</div>

<div class="container">
    <div>
        <div class="heading">
            <a href="#">Not important at all</a>
        </div>
    </div>
</div>

例如：如果一个容器包含字符串“非常重要的文本”，我希望给“heading”类一个高度为200像素，同时将其“container”div的背景设为绿色。如果有不清楚的地方，请告诉我。谢谢！祝好。

- njacoy

---

你能否同样轻松地将相同的规则应用于 .html 而不是 .container，以便可以操作包含该确切字符串的任何 html 文件中找到的任何字符串？ - Mossy Douglas

Answer 1

使用JQuery中的:contains选择器。

$(".container .heading a:contains('Very important text')").each(function(i , v){
    $(this).closest(".heading").css("height" , "200px");
    $(this).closest(".container").css("background-color" , "green");
});

或者简单地说

$(".container .heading a:contains('Very important text')")
        .closest(".heading").css("height" , "200px")
        .closest(".container").css("background-color" , "green");

Fiddle

- Sudharsan S

Answer 2

您可以这样做：

$('.container').filter(':contains("Very important text")')
.css('background-color', 'green')
.find('.heading').css('height', '200px');

演示：http://jsfiddle.net/AmitJoki/y82X9/1

如Zword所建议的，使用过滤器。这个解决方案是最快的。JSPerf

- Amit Joki

---

假设您的 div 容器包含一些文本，如果您上面的代码会感到困惑。 - Sudharsan S

代码相当自我解释。找到包含文本的div并将css应用于它，然后找到.heading并对其应用css。其中有什么令人困惑的吗？ - Amit Joki

这个解决方案肯定不错，但只是说一下如果你使用过滤器会更好。请参见测试：http://jsperf.com/so-22877172 - Zword

Answer 3

只需使用这个代码...

$（“.container div：contains（'非常重要的文本'）”）.parent（）。css（“height”，“300”）;

您可以自由尝试。

- user1452840

Answer 4

使用过滤器是更快、更好的选择：

$(".container .heading a").filter(":contains('Very important text')").closest(".heading").css("height","200px").closest(".container").css("background-color", "green");

演示 Fiddle

查看测试：http://jsperf.com/so-22877172

- Zword

---

他说容器类的背景颜色不是标题类。 - Sudharsan S