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

例如：如果一個容器包含字符串“非常重要的文本”，我想給“標題”類賦予200px的高度，並將其“容器” 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");

小提琴

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

Answer 3

使用過濾器是更快，更好的選擇：

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

演示小提琴

參見測試： http : //jsperf.com/so-22877172

Answer 4

只是用這個..

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

你可以玩。