Как присвоить CSS к блоку?

441

06 февраля 2017, 18:19

На странице есть несколько блоков с такой разметкой, изменяется только 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

Answer 1

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

Answer 2

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

Answer 3

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

Но вот чистый 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>