jQuery скрыть блок родителя

357

06 июня 2017, 01:57

Здравствуйте, есть такой код. При запуске, он скрывает текст всех элементов кроме тех что с текстом Show, вопрос, нужно сделать так чтобы он скрывал не только текст, но и весь блок вместе с родителем иначе так остаются рамки красные без текста.

                    $('div.name').each(function () { 
                        if ($(this).text() !== 'Show') { 
                            $(this).css('display', 'none'); 
                        } 
                    });

li { 
border:1px solid red; 
margin:20px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<li> 
<a href="#" class="ui-btn"> 
<div class="name">Show</div> 
</a> 
</li> 
 
<li> 
<a href="#" class="ui-btn"> 
<div class="name">Hide</div> 
</a> 
</li> 
 
<li> 
<a href="#" class="ui-btn"> 
<div class="name">Hide</div> 
</a> 
</li>

Answer 1

Цикл тут вообще не нужен. Достаточно использовать contains, чтобы выбрать элементы, которые содержат строку Hide и closest, чтобы выбрать ближайшего подходящего предка.

/* 
// Этот код работает. Но он избыточен 
$('div.name').each(function() { 
  if ($(this).text() !== 'Show') { 
    $(this).closest('li').hide();     
  } 
}); 
*/ 
 
$("div.name:contains('Hide')").closest('li').hide();

li { 
  border: 1px solid red; 
  margin: 20px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<li> 
  <a href="#" class="ui-btn"> 
    <div class="name">Show</div> 
  </a> 
</li> 
 
<li> 
  <a href="#" class="ui-btn"> 
    <div class="name">Hide</div> 
  </a> 
</li> 
 
<li> 
  <a href="#" class="ui-btn"> 
    <div class="name">Hide</div> 
  </a> 
</li>