多个div找到带有特定文本的DIV

如下有多个同样式的div：

<div class="mini-grid-cell"><a>文本内容</a></div>
<div class="mini-grid-cell"><a>文本内容</a></div>
<div class="mini-grid-cell"><a>文本内容</a></div>
<div class="mini-grid-cell"><a>文本a</a></div>
<div class="mini-grid-cell"><a>文本内容</a></div>
<div class="mini-grid-cell"><a>文本内容</a></div>

我们需要找到内容为文本的div更改样式：

jQuery写法：

$('.mini-grid-cell a:contains(文本a)').css('color', 'red');

得到的效果：

 

 

 

注意：需要引用高版本的jQuery文件，2.0的不适用$的写法

js的写法：

var elList = document.querySelectorAll(".mini-grid-cell");
        elList.forEach(function(el) {
            if(el.innerText.indexOf("文本a") !== -1) {
                console.log("123");
            }
        });

效果图：

 

 

 最后附上完整代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>

    <body>
        <div class="mini-grid-cell">
            <a>文本内容</a>
        </div>
        <div class="mini-grid-cell">
            <a>文本内容</a>
        </div>
        <div class="mini-grid-cell">
            <a>文本内容</a>
        </div>
        <div class="mini-grid-cell">
            <a>文本a</a>
        </div>
        <div class="mini-grid-cell">
            <a>文本内容</a>
        </div>
        <div class="mini-grid-cell">
            <a>文本内容</a>
        </div>
    </body>
    <script type="text/javascript">
        $('.mini-grid-cell:contains(文本a)').css('color', 'red');

        var elList = document.querySelectorAll(".mini-grid-cell");
        elList.forEach(function(el) {
            if(el.innerText.indexOf("文本a") !== -1) {
                console.log("123");
            }
        });
    </script>

</html>

忍别人所不能忍的痛，吃别人所不能吃的苦，方能收获别人所得不到的收获。

 

posted @ 2023-02-14 10:40  人渴浸思茶  阅读(85)  评论(0)    收藏  举报