javascript - 在 div 的所有子级中搜索文本并隐藏不包含它的文本

Question

我想隐藏所有不包含我在 . 中编写的文本的 div。

我尝试过这样的事情:

var $searchBox = $('#search-weeazer');
$searchBox.on('input', function() {
    var scope = this;
    var $userDivs = $('.information ');
    if (!scope.value || scope.value === '') {
        $userDivs.show();
        return;
    }
    $userDivs.each(function(i, div) {
        $('div:contains(scope.value)').hide();
    })
});

但不起作用(我知道我会隐藏包含文本的 div，用于测试目的 ^^)

div 是在 Ajax 调用后动态创建的，div 的结构如下:

"<div class=\"row information text-white shadow-lg p-2 mb-2\">" +
        "<div class=\"col-3 profilePicture\">" +
            "<img src=\"../../img/bg-masthead.jpg\" alt=\"Immagine profilo\" class=\"profileImage rounded-circle\">" +
            "<div class=\"results\">" +
                "<div class=\"results-content\">" +
                    "<span class=\"stars\">3</span>" +
                "</div>" +
            "</div>" +
        "</div>" +
        "<div class=\"col-9 infos\">" +
            "<div class=\"row\">" +
              "<div class=\"col-4 nome\"><b>Nome: </b>" + nome + "</div>" +
              "<div class=\"col-4 regione\"><b>Regione: </b>" + regione + "</div>" +
              "<div class=\"col-4 citta\"><b>Città: </b>" + citta + "</div>" +
            "</div>" +
            "<div class=\"row\">" +
                "<div class=\"col-4 dataNascita\"><b>Data di nascita: </b>" + eta + "</div>" +
                "<div class=\"col-4 coaching\"><b>Coaching online: </b>" + (coaching === "T" ? "Sì" : "No") + "</div>" +
                "<div class=\"col-4 sesso\"><b>Sesso: </b>" + (sesso === "F" ? "Femmina" : "Maschio") + "</div>" +
            "</div>" +
            "<div class=\"row border-bottom\">" +
                "<div class=\"col-6 blurry-text cellulare\"><b>Cellulare: </b>" + cellulare + "</div>" +
                "<div class=\"col-6 blurry-text email\"><b>Email: </b>" + email + "</div>" +
             "</div>" +
            "<div class=\"row descriptionText \">" +
                "<div class='col-10 descrizione'>" + descrizione + "</div>" +
                "<div class='col-2 align-items-center'><button type='button' class='btn btn-primary btn-large profileButton' data-id='" + id + "'>Profilo</button></div>" +
            "</div>" +
            "</div>" +
      "</div>"

但该脚本目前什么也不做。有什么建议吗？

Answer 1

当前，您正在搜索包含文字字符串 (scope.value) 的元素。像这样使用串联:

$("div:contains('" + scope.value + "')");

或者使用模板文字:

$(`div:contains('${scope.value}')`);