Question

如果我有一个名为#container的容器div，其中包含一堆.inside个div，我将如何检查具有指定内容的某个.inside div是否正确是否存在一串英文文本？我这样做是为了防止我为网站设置的通知系统中的重复项。我不需要实际的文本 - 只是它是否存在。此外，能够修改.inside div的内容如果找到它会很好，所以我可以增加并显示消息发生的次数（分组，如果你愿意的话）。

谢谢，

詹姆斯

Answer 1

使用contains-selector^[docs]，然后使用length^[docs]属性查看已找到的数量。

var some_string = "test";

var els_with_string = $('#container .inside:contains(' +  some_string + ')');

  // use .length to check to see if there was at least one
if( els_with_string.length ) {
    alert( "at least one already exists" );
}

来自文档：

说明：选择包含指定文字的所有元素。

匹配文本可以直接出现在所选元素中，任何元素的后代中，或其组合中。与属性值选择器一样，括号内的文本：contains（）可以写成裸字或用引号括起来。文本必须具有匹配的案例才能被选中。

如果找到了修改内容，则取决于您想要进行的修改。我不确切地知道分组的意思。

编辑：关于您的评论，您可以完成以下所需的操作：

var error = "ERROR:SomeError ";
var el_with_error = $('#container .inside:contains(' + error + ')');

if (el_with_error.length) {
    var text = el_with_error.text();
    if (/\(\d+\)/.test(text)) {
        var new_text = text.replace(/\((\d+)\)/, function(s, g1) {
            g1++;
            return "(" + g1 + ")";
        });
        el_with_error.text(new_text);
    } else {
        el_with_error.text(text + " (2)");
    }
} else {
    $('#container').append('<div class="inside">' + error + '</div>');
}

直播示例： http://jsfiddle.net/ScZbV/

如果您能够将分组数量包装在<span>元素中，我们可以在没有正则表达式的情况下使用。

var error = "ERROR:SomeError ";
var el_with_error = $('#container .inside:contains(' + error + ')');

if (el_with_error.length) {
    var span = el_with_error.find('span');
    if (span.length) {
        var num = +span.text();
        span.text( ++num );
    } else {
        el_with_error.append(" (<span>2</span>)");
    }
} else {
    $('#container').append('<div class="inside">' + error + '</div>');
}

示例： http://jsfiddle.net/ScZbV/1/

Answer 2

我喜欢使用选择器（其他人使用.filter，这同样是一个选项）。

$(".inside:contains('waldo')").css({color: 'red'});

这是区分大小写的。

Answer 3

检查存在

$("#container .inside:contains('old text')").size() > 0

修改文字

$("#container .inside:contains('old text')").text('new text');

Answer 4

这是一种略微不同的看待它的方式......

为每个“类型”的通知应用一个类名。所以你的通知标记如下：

<div class="inside error">Error</div>

然后在这些div中寻找一个字符串，使用这些新的类名称，并使用.find（）。如果jQuery返回一个对象然后它存在，那么用它做一些事情。但是，如果它什么也没有返回，那就添加它。

示例：http://jsbin.com/imexi4

是否存在具有特定内容的div

4 个答案: