包含方法和突出显示元素的问题

Issue with the contains method and highlighting elements

本文关键字：元素 问题 显示 方法 包含      更新时间：2024-05-04

我想突出显示一个包含在文本框中写入的字符串的元素。这是代码中应该执行的部分：

$("#rightContainer .magnifier").click(function () {
    var a = $("#searchBox").val();
    if (a != "") {
        var foundin = $('div:contains(a)');
        foundin.addClass("highlighted");    
        alert(a);
    }
})

问题是整个页面都被突出显示了。我假设发生这种情况是因为我有一个主容器，它有它的子容器，所以contains方法选择整个主容器。是这样还是因为其他原因，有人有更好的方法吗？提前谢谢。

:contains选择器将返回包含您正在搜索的文本的任何元素，在本例中为"a"。这与名为a的变量无关。也许你想做这样的事情：

$("#rightContainer .magnifier").click(function () {
    var a = $("#searchBox").val();
    if (a != "")
    {
        var foundin = $("div:contains('" + a + "')");
        foundin.addClass("highlighted");    
        alert(a);
    }
})

如果我理解正确，你只想突出显示包装搜索框的div，而不是任何其他div。使用closest（）查找该div。

$("#rightContainer .magnifier").click(function () {
    var a = $("#searchBox").val();
    if (a != "")
    {
        $("#searchBox").closest('div').addClass('highlighted');
    }
})
相关文章：