Jquery：检查div是否包含文本，然后执行相应操作

Question

我正在尝试在 jQuery 中检查一个 div 是否包含某些文本，如果包含则添加一个类。

所以我写了这样的代码：

    if( $("#field > div.field-item").text().indexOf('someText') = 0) {
        $("#somediv").addClass("thisClass");
    }

我做不到这个。

<div id="field"><div class="field-item">someText</div></div>

<div id="somediv"></div>

这是不正确的吗？

- Roger

Answer 1

你的代码存在两个问题：

• JavaScript中的等于操作符是==，而不是=。
• jQuery.text()将匹配元素的所有文本节点连接成一个字符串。如果你有两个相邻的元素，第一个包含'some'，第二个包含'Text'，则你的代码会错误地认为存在一个包含'someText'的元素。

我建议改为以下代码：

if ($('#field > div.field-item:contains("someText")').length > 0) {
    $("#somediv").addClass("thisClass");
}

- Ayman Hourieh

---

我有两种类型的文本“Follow”和“Following”在div中。如何找到具有div的确切文本。 例如：5个带有“Follow”的div和2个带有“Following”的div，输出显示“Follow”的7个，“Following”的2个。 - PRANAV

Answer 2

是的，我现在让它为我思考。它很好用!!!

if($("div:contains('CONGRATULATIONS')").length)
                        {
                            $('#SignupForm').hide(500);
                        }

- Shaharia Azam

Answer 3

if( $("#field > div.field-item").text().indexOf('someText') >= 0)

一些浏览器会包含空格，而其他浏览器则不会。在此处使用 >= 是合适的。否则等于是双等号 ==

- Tracker1

Answer 4

Ayman是正确的，但你也可以这样使用它：

if( $("#field > div.field-item").text().indexOf('someText') >= 0) {
        $("#somediv").addClass("thisClass");
    }

- Canavar

Answer 5

为什么不直接呢？

var item = $('.field-item');
for (var i = 0; i <= item.length; i++) {
       if ($(item[i]).text() == 'someText') {
             $(item[i]).addClass('thisClass');
             //do some other stuff here
          }
     }

- Tim

---

不是有效的回应。"." 是选择类，而不是 div id。 - Iria

Answer 6

这应该可以运行，并且不区分大小写

function has_text(selector, text){
    text = text.toLowerCase();
    return selector.text().toLowerCase().indexOf(text) > -1
}

// for test
var exists = has_text($('#test_id'), 'hello');
console.log(exists)

- Mohamad Hamouday

Answer 7

你可能想尝试使用contains选择器：

if ($("#field > div.field-item:contains('someText')").length) {
    $("#somediv").addClass("thisClass");
}

另外，正如其他人提到的那样，你必须使用 == 或 === 而不是 =。

- TM.

Answer 8

这是一个2020年的纯JavaScript解决方案：

const fieldItem = document.querySelector('#field .field-item')
if (fieldItem.innerText.includes('someText')) {
  fieldItem.classList.add('red')
  console.log(fieldItem)
}

<div id="field">
  <div class="field-item">someText</div>
</div>

- Ludolfyn

Answer 9

HTML

<div id="field"><div class="field-item">someText</div></div>
<div id="somediv"></div>

JS

 $( document ).ready(function() {
 if ($('div.field-item:contains("someText")').length > 0) {

$('div#somediv').append("<p>someText was there, so class 'thisClass' was added").addClass("thisClass")
.css("border","2px red");
  }
});

JSfiddle：

https://jsfiddle.net/Loqctuaf/

- Jean G.T