在HREF中隐藏特定文本的div

Question

我看到了类似的问题，但它们比较简单：如果div包含特定文本，则隐藏它。这有效。

在我的情况下，我有更复杂的结构，它是动态变化的。它可以是一个带有一些JavaScript混合的div中的一些div。

从下面的示例中，如果任何元素的href中包含特定ID：“?id=my-text”，我需要隐藏一个div（或向其应用hide类）。

<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

编辑： 我遗漏了一个重要细节，需要隐藏的顶部div的ID是静态的："top-div"。我只想对“top-div”内的div应用文本搜索逻辑，而不是整个页面。

- Myroslav Tedoski

---

Uncaught SyntaxError: Invalid regular expression: /?id=my-text/: Nothing to repeat - isherwood

你可能不想在查询字符串搜索中包含问号。你的参数可能不总是以相同的顺序出现。 - isherwood

我不明白为什么你不使用：$("a[href*='?id=my-text']").parent('div').hide(); ??? - A. Wolff

Answer 1

您可以使用过滤器代替。

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

- adeneo

---

看起来不错。添加了对父级div的引用。https://jsfiddle.net/isherwood/msna997j/2/ - isherwood

它不应该需要对父元素的引用，因为它已经针对锚点的父级 DIV。 - adeneo

OP似乎想要比那更高一级的东西，不是吗？无论如何，您可以添加一些文档说明。我是一名经验丰富的开发人员，但仍然有点难以理解整个过程。 :) - isherwood

@MyroslavTedoski - 代码还是一样的，只需过滤那个 DIV 而不是所有的 DIV。 - adeneo

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");

- Bruno J. S. Lesieur