javascript - jQuery:在单击时隐藏与选择器具有相同文本的对象的父级

Question

我有一个菜单(因为特定的动态内容，我不能使用类或 ID)隐藏所有与菜单选择器文本不同的元素。

HTML:

<ul>
 <li class="dropDown">
 <li class="galSub"><a href="#">Alla</a></li>
 <li class="galSub"><a href="#">NorrlandsOperan</a></li>
 <li class="galSub"><a href="#">Norrdans</a></li>
 <li class="galSub"><a href="#">Estrad Norr</a></li>
 <li class="galSub"><a href="#">Piteå Kammaropera</a>  </li>
</ul>

<div class="box boxImg col2">
   <h3>Figaro</h3>
    <h4 class="prodEns">NorrlandsOperan</h4>
</div>
<div class="box boxImg col2 ">
   <h3>A la Carte</h3>
   <h4 class="prodEns">Norrdans</h4>
</div>
<div class="box boxImg col2">
   <h3>Porta</h3>
   <h4 class="prodEns">Estrad Norr</h4>
</div>
<div class="box boxImg col2">
   <h3>A la Carte</h3>
   <h4 class="prodEns">Piteå Kammaropera</h4>
</div>

JQuery:

var galLi = $('.galSub a');
var prodItm = $('.boxImg'); 
var prodEns = $('.prodEns');

galLi.click(function(e){
    var refLink = $(this);
    e.preventDefault();
    if (prodEns.text() == refLink.text()) {
    $('this').parent().siblings(prodItm).hide();
}

Answer 1

我会选择 .filter()在 :contains因为它可以返回部分匹配

var galLi = $('.galSub');
var boxImgs = $('.boxImg');

galLi.click(function(e){
    var text = $(this).text().trim();
    e.preventDefault();
    boxImgs.filter(function(){
        return $(this).find('.prodEns').text().trim() == text;
    }).toggle();//use toggle if you want to hide and show, else just use hide()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
 <li class="dropDown">
 <li class="galSub"><a href="#">Alla</a></li>
 <li class="galSub"><a href="#">NorrlandsOperan</a></li>
 <li class="galSub"><a href="#">Norrdans</a></li>
 <li class="galSub"><a href="#">Estrad Norr</a></li>
 <li class="galSub"><a href="#">Piteå Kammaropera</a>  </li>
</ul>

<div class="box boxImg col2">
   <h3>Figaro</h3>
    <h4 class="prodEns">NorrlandsOperan</h4>
</div>
<div class="box boxImg col2 ">
   <h3>A la Carte</h3>
   <h4 class="prodEns">Norrdans</h4>
</div>
<div class="box boxImg col2">
   <h3>Porta</h3>
   <h4 class="prodEns">Estrad Norr</h4>
</div>
<div class="box boxImg col2">
   <h3>A la Carte</h3>
   <h4 class="prodEns">Piteå Kammaropera</h4>
</div>