0

Здравствуйте, есть такой код. При запуске, он скрывает текст всех элементов кроме тех что с текстом 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>

9
  • Заменить $(this).css('display', 'none'); на $(this).parnt().css('display', 'none'); Полный код $('div.name').each(function () { if ($(this).text() !== 'Show') { $(this).parnt().css('display', 'none'); } }); 4 июн 2017 в 14:33
  • родитель в вашем понимании это div, a или li? 4 июн 2017 в 14:36
  • родитель это li
    – hovdev
    4 июн 2017 в 14:38
  • Тогда так $(this).closest('li').hide(); 4 июн 2017 в 14:40
  • Vanya Avchyan Первый вариант не сработал, а вот второй сработал. Огромное вам спасибо Vanya Avchyan ))
    – hovdev
    4 июн 2017 в 14:43

1 ответ 1

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>

7
  • Я бы плюсанул только вот закончились плюсики на сегодня :).Так что так + 4 июн 2017 в 14:55
  • Я скинул вам часть кода, Цикл там нужен.
    – hovdev
    6 июн 2017 в 12:52
  • @S1lllver в ответе, так или иначе, он (вариант решения через цикл) присутствует........ Только это довольно странное поведение - скидывать не тот код, над которым производится работа. Всё равно что спрашивать о том ка починить спицы на колесе, хотя на самом деле у тебя трактор беларусь.. 6 июн 2017 в 12:58
  • вопрос был не про цикл, соответственно цикл тут не причем )
    – hovdev
    6 июн 2017 в 13:04
  • 1
    @S1lllver вполне легко - просто не рефакторишь и всё :D .......обрати внимание на закомментированный код ответа :D 6 июн 2017 в 13:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.