如果div包含特定的文本字符串，请编辑父级的CSS [英] If a div contains a specific string of text, edit the parent's css

问题描述

我希望使用简单的jQuery脚本来搜索特定的文本字符串，以提供一些帮助.如果该文本存在，则操纵包含div的CSS. HTML看起来像:

I'd love some help with a simple jQuery script that searches for a specific string of text. If that text exists, then manipulate the containing div's css. The HTML would look like:

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

例如:如果一个容器包含字符串非常重要的文本"，我想给标题"类赋予200px的高度，并将其容器" div赋予绿色的背景.如果不清楚，请告诉我.预先感谢！

For example: If a container contains the string "Very important text" I would like to give the 'heading' class a height of 200px and its 'container' div a background of green. Please let me know if this is unclear. Thanks in advance!

欢呼声.

推荐答案

在Jquery中使用:contains 选择器.

use :contains selector in Jquery .

$(".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");

小提琴

这篇关于如果div包含特定的文本字符串，请编辑父级的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！