Скрытие div по определенному тексту в HREF

Question

Я видел похожие вопросы, но они на более простой стороне: если div содержит определенный текст, тогда скройте его. Что работает.

В моем случае у меня более сложная структура, динамически меняющаяся. Это может быть несколько div в пределах div с некоторым javascript в миксе.

В приведенном ниже примере, мне нужно, чтобы скрыть DIV (или применить класс с шкурой к ней), если какой-либо из элементов имеет HREF с определенным ID в нем: «?id=my-text»

<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> 

I попытался следующие, но без удачи:

$.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

EDIT: Одна вещь, которую я пропустил, это то, что идентификатор самого верхнего div, который мне нужно скрыть, является статическим: «top-div». И я бы хотел использовать текстовую логику только для div в «top-div», а не для всей страницы.

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