0

На странице есть несколько блоков с такой разметкой, изменяется только id="full?"

<div class="boxx">
    <div class="box">
        <div class="item stat-panel text-center dub-block">
            <header>
                <h2 class="name-track-short">
                    <div class="play_listfull">
                        <a id="full5640" class="playfull viewsfull" href="#">Crossfaith - Revolution</a>
                    </div>
                </h2> 
            </header>   
        </div>
    </div>
</div>

Как можно присвоить к классу boxx стиль display:none, если в ссылке a присутствует класс viewsfull

5
  • Только посредством Javascript ? или можно использовать jQuery ?
    – Arsen
    4 фев 2017 в 20:07
  • Разве что через js - легко. Нельзя сослаться на родительские элементы через css. Даже на предыдущие сестренские нельзя.
    – wokalek
    4 фев 2017 в 20:10
  • Без разницы, js или jquery
    – steep
    4 фев 2017 в 20:11
  • Советую класс viewsfull присуждать элементу .boxx, который хотите скрыть, и описать для него свой display:none, но я хз какая у тебя структура, так что это такое.
    – wokalek
    4 фев 2017 в 20:12
  • Структуру менять нельзя
    – steep
    4 фев 2017 в 20:16

3 ответа 3

2

$('.boxx').each(function(){
   if($(this).find('a').hasClass('viewsfull')){
   $(this).hide()
   }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxx">
    <div class="box">
        <div class="item stat-panel text-center dub-block">
            <header>
                <h2 class="name-track-short">
                    <div class="play_listfull">
                        <a id="full5640" class="playfull viewsfull" href="#">Crossfaith - Revolution</a>
                    </div>
                </h2> 
            </header>   
        </div>
    </div>
</div>

Pavel Mayorov указал на то, что проще использовать селектор :has, чтобы сразу найти блоки, имеющие ссылку с определенным классом:

 $('.boxx:has(a.viewsfull)').toggle()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxx">
    <div class="box">
        <div class="item stat-panel text-center dub-block">
            <header>
                <h2 class="name-track-short">
                    <div class="play_listfull">
                        <a id="full5640" class="playfull viewsfull" href="#">Crossfaith - Revolution</a>
                    </div>
                </h2> 
            </header>   
        </div>
    </div>
</div>

1

Блин, не так быстро умею такие задачки решать)

Но вот чистый js, например.
Или codepen.

var
  listOfBoxx = document.querySelectorAll(".boxx"),
  listOfATagsFromBoxx = document.querySelectorAll(".boxx * [id^='full']");
 

for (var i = 0; i < listOfATagsFromBoxx.length; i++)
  if (~listOfATagsFromBoxx[i].className.indexOf('viewsfull'))
    listOfBoxx[i].style.display = 'none';
<div class="boxx">
  <div class="box">
    <div class="item stat-panel text-center dub-block">
      <header>
        <h2 class="name-track-short">
                    <div class="play_listfull">
                        <a id="full5640" class="playfull viewsfull" href="#">У меня есть класс viewsfull, я не покажусь.</a>
                    </div>
                </h2> 
      </header>
    </div>
  </div>
</div>


<div class="boxx">
  <div class="box">
    <div class="item stat-panel text-center dub-block">
      <header>
        <h2 class="name-track-short">
                    <div class="play_listfull">
                        <a id="full3214" class="playfull" href="#">А у меня нет этого класса, я покажусь.</a>
                    </div>
                </h2> 
      </header>
    </div>
  </div>
</div>

1

$('div.boxx:has(.viewsfull)').hide();

1
  • Все бы хорошо, но вы забыли, что viewsfull - это класс, а значит надо поставить точку перед ним.
    – Crantisz
    5 фев 2017 в 9:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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