Question

我试图让这个jQuery脚本只将css应用于包含文本的类，而不是其他的。

如果类包含某个文本，我想将宽度限制为100像素，将高度限制为100像素。

if ($('#targetID > div.targetClass:contains("Important Text")') {
        $('targetClass').css("width" , "100px").css("height" , "100px");
}

HTML Here：

   <div id="targetID">
    <div>
        <div class="targetClass">
            <a href="#">Not important</a>
        </div>
    </div>
    <div>
        <div class="targetClass">
            <a href="#">Not important</a>
        </div>
    </div>
    <div>
        <div class="targetClass">
            <a href="#">Important Text and Other Stuff</a>
        </div>
    </div>
    <div>
        <div class="targetClass">
            <a href="#">Not important</a>
        </div>
    </div>
   </div>

谢谢

Answer 1

:contains是一个选择器，当您尝试使用它时，它不会返回true / false。你可以做你想做的事：

$('#targetID div.targetClass:contains("Important Text")').css({
  "width": "100px",
  "height": "100px"
})

$('#targetID div.targetClass:contains("Important Text")').css({
  "width": "100px",
  "height": "100px"
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="targetID">
    <div>
        <div class="targetClass">
            <a href="#">Not important</a>
        </div>
    </div>
    <div>
        <div class="targetClass">
            <a href="#">Not important</a>
        </div>
    </div>
    <div>
        <div class="targetClass">
            <a href="#">Important Text and Other Stuff</a>
        </div>
    </div>
    <div>
        <div class="targetClass">
            <a href="#">Not important</a>
        </div>
    </div>
   </div>

Answer 2

纯JS方法似乎最稳定：

var el = document.getElementById("yourTagId")
if (el.innerHTML.indexOf("Very cool text copy") !== -1) {
    // do something
}

Answer 3

你可以在一个代码行中完成，

$("#targetID .targetClass:contains('Important Text')").css("width" , "100px").css("height" , "100px");

如果div类包含某些文本，则仅调整该类的css

3 个答案: