javascript - 如果一个 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>

例如:如果容器包含字符串“Very important text”，我想为“标题”类设置 200 像素的高度，并为其“容器”div 设置绿色背景。如果不清楚，请告诉我。提前致谢!

干杯。

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