Question

我已经看到了关于如何显示/隐藏不包含（或包含）特定关键字的div的解决方案早午餐，但它们都没有帮助。

到目前为止，我已经完成了一些这样的代码：

<div class="media">Title : orange</div>
<div class="media">this is something about orangessss yolo</div>
<div class="media">Title : apple</div>
<div class="media">this is something about apple yolo</div>

<button id="filter">test</button>

我有一种方法来筛选元素：

        var KeywordArr = ["orange","orangessss"];

$('#filter').click(function () {  
        var key = $(".media"); 
        var word= key.find(".media").html();
            if(!word && word.toLowerCase().match([KeywordArr])) {
            $(".media").css("display", "none");
        }
});

这些代码假设将“display：none”添加到每个“media”类，该类不包含数组中包含的任何关键字。但它不是我的例外。

那么当“＆lt; div”＆gt;时，如何隐藏所有元素呢？在keywordArr中没有包含值？

解决方案：

 $('#filter').click(function () {  

            var elems = $(".media");
            var KeywordArr = ["orange", "orangessss"];
            var res = $();
            for (var i = 0; i < KeywordArr.length; i++) {
              res = res.add(elems.filter(":contains('" + KeywordArr[i] + "')"));
            }
            elems.not(res).hide();

    });

Answer 1

尝试在此上下文中使用:contains()选择器，

var elems = $(".media");
var KeywordArr = ["orange", "orangessss"];
var res = $();

for (var i = 0; i < KeywordArr.length; i++) {
  res = res.add(elems.filter(":contains('" + KeywordArr[i] + "')"));
}

elems.not(res).hide();

另请注意，contains选择器区分大小写。

DEMO

Answer 2

为了使代码更具说明性，您可以使用数组null。还要确保将变量名全部保存为小写。

foreach

此外，如果你可以用ES6模板文字编写相同的代码，这里有一个指向Demo的链接

var elems = $(".media");
var keywordArr = ["orange", "orangessss"];
var res = $();

keywordArr.forEach(function(keyword){
    res = res.add(elems.filter(":contains('" + keyword + "')"));
});

elems.not(res).hide();

如果不包含特定关键字

2 个答案:

DEMO