Question

我已经看过类似的问题，但它们更简单：如果div包含特定文本，则隐藏它。哪个有用。

在我的情况下，我有更复杂的结构，动态变化。它可以是div中的一些div，其中包含一些javascript。

从下面的示例中，如果任何元素的href中包含特定的ID，我需要隐藏div（或者将类隐藏到它中）：＆＃34; ?id=my-text＆＃34 ;

<div **id="top-div"**>
    <div>
        <script type="text/javascript">
        some java script code here...
        </script>
        <a target="_blank" href="some_very_long_url_that_contains_an_id_im_looking_for?id=my-text&bunch_of_other_parameters" width="300" height="250" border="0" alt="" style=" _width:298px; _height:248px; _overflow:hidden; border:1px solid #000000;margin:-1px;"></a>
        <script>
        some java script code here...
        </script>
    </div>
</div>

我尝试了以下但没有运气：

$.expr[":"].containsNoCase = function(el, i, m) {
    var search = m[3];
    if (!search) return false;

    var pattern = new RegExp(search,"i");
    return pattern.test($(el).text());
};

$(document).ready(function() {
    $("div a:containsNoCase('?id=my-text')").parent('div').hide();
});

Fiddle demo

编辑：我错过的一件事是我需要隐藏的最顶层的ID是静态的：＆＃34; top-div＆＃34;。而且我想应用文本搜索逻辑只做div＆＃34; top-div＆＃34;而不是整页。

Answer 1

您可以使用过滤器

$('#top-div').filter(function() {
    return $(this).find('a').toArray().some(function(item) {
        return item.search.toLowerCase().indexOf('id=my-text') !== -1;
    });
}).hide();

Answer 2

当您想直接在匹配元素上应用CSS时，只需应用此选择器：

[href*=my-text] {
    background-color: #f00;
}

<div class="container">
    <a href="?id=my-text">Link</a><br>
    <a href="?id=your-text">Link</a><br>
    <a href="?id=her-text">Link</a>
</div>

如果要应用CSS的元素是父元素，请使用类似这样的JS：

var target = document.getElementsByClassName("container")[0];

if (target.querySelectorAll("[href*=my-text]")[0]) {
    target.style.backgroundColor = "#f00";
}

<div class="container">
    <a href="?id=my-text">Link</a><br>
    <a href="?id=your-text">Link</a><br>
    <a href="?id=her-text">Link</a>
</div>

<div class="container">
    <a href="?id=his-text">Link</a><br>
    <a href="?id=your-text">Link</a><br>
    <a href="?id=her-text">Link</a>
</div>

您还可以创建自己的函数以在任何情况下应用它：

function ifInnerSelector(targetSelector, innerSelector, callback) {
    var targets = document.querySelectorAll(targetSelector);
    [].forEach.call(targets, function (target) {
        var matched = target.querySelectorAll(innerSelector)[0];
        if (matched) {
            callback(null, target, matched);
        } else {
            callback(new Error("No matched item found."), target, null);
        }
    });
} 

ifInnerSelector(".container", "[href*=my-text]", function (err, target, matched) {
  if (err) {
    // Do something in case of error.
    return false;
  }
  target.style.backgroundColor = "#f00";
});

<div class="container">
    <a href="?id=my-text">Link</a><br>
    <a href="?id=your-text">Link</a><br>
    <a href="?id=her-text">Link</a>
</div>

<div class="container">
    <a href="?id=his-text">Link</a><br>
    <a href="?id=your-text">Link</a><br>
    <a href="?id=her-text">Link</a>
</div>

<div class="container">
    <a href="?id=my-text">Link</a><br>
    <a href="?id=your-text">Link</a><br>
    <a href="?id=her-text">Link</a>
</div>

使用像jQuery这样的库，你也可以这样做：

$("[href*=my-text]").closest(".container").css("background-color", "#f00");

或

$("[href*=my-text]").parents(".container:first").css("background-color", "#f00");

隐藏HREF中特定文本的div

2 个答案: