檢查 div 是否有 xx class 來隱藏和顯示父元素

Question

如果 class team-zone-wrapper不包含 class rpt-zone-item並將Team A的名稱更改為Teams ，我想在每個 class flex-container中隱藏隱藏Team B

碼筆https://codepen.io/KGuide/pen/mdPzvKB

如圖所示

 if ( $('.team-zone-wrapper').children().length > 1 ) { // do something $(this).hide(); }

 .flex-container { display: flex; justify-content: center; border:1px solid brown; margin:15px; }.flex-container > div { /* background-color: #f1f1f1; */ width: 300px; margin: 10px; text-align: center; /* line-height: 75px; */ /* font-size: 30px; */ padding: 10px; border:1px solid #ccc }.rpt-zone-header { background: #f5f5f5; background: #412B1E; background: #E89D5A; color: #fff; text-transform: uppercase; font-size: 17px; padding: 9px; font-weight: 600; border-bottom: 0px solid #ddd; }.rpt-zone-item { background: #f9f9f9; padding: 5px 10px; border-bottom: 1px solid #ddd; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> <div class="rpt-zone-item">Team 5</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> </div> </div> </div> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> </div> </div> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> </div> </div> </div>

在上面的代碼中隱藏部分不起作用我無法使用隱藏元素

if ( $('.team-zone-wrapper').children().length > 1 ) {
     // do something
   $(this).hide();
}

Answer 1

單鏈使用not()並讓 jQuery 在內部完成所有循環

 $('.team-zone-wrapper').not(':has(.rpt-zone-item)').hide().siblings().find('.rpt-zone-header').text('TEAMS')

 .flex-container { display: flex; justify-content: center; border:1px solid brown; margin:15px; }.flex-container > div { /* background-color: #f1f1f1; */ width: 300px; margin: 10px; text-align: center; /* line-height: 75px; */ /* font-size: 30px; */ padding: 10px; border:1px solid #ccc }.rpt-zone-header { background: #f5f5f5; background: #412B1E; background: #E89D5A; color: #fff; text-transform: uppercase; font-size: 17px; padding: 9px; font-weight: 600; border-bottom: 0px solid #ddd; }.rpt-zone-item { background: #f9f9f9; padding: 5px 10px; border-bottom: 1px solid #ddd; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> <div class="rpt-zone-item">Team 5</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> </div> </div> </div> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> </div> </div> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> </div> </div> </div>

Answer 2

您可以使用.team-zone-wrapper遍歷所有元素，然后檢查子元素的length是否小於 2 以隱藏該元素：

 $('.team-zone-wrapper').each(function(){ if ($(this).children().length < 2) { $(this).hide(); $(this).siblings('.team-zone-wrapper').find('.rpt-zone-header').text('Teams'); } });

 .flex-container { display: flex; justify-content: center; border:1px solid brown; margin:15px; }.flex-container > div { /* background-color: #f1f1f1; */ width: 300px; margin: 10px; text-align: center; /* line-height: 75px; */ /* font-size: 30px; */ padding: 10px; border:1px solid #ccc }.rpt-zone-header { background: #f5f5f5; background: #412B1E; background: #E89D5A; color: #fff; text-transform: uppercase; font-size: 17px; padding: 9px; font-weight: 600; border-bottom: 0px solid #ddd; }.rpt-zone-item { background: #f9f9f9; padding: 5px 10px; border-bottom: 1px solid #ddd; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> <div class="rpt-zone-item">Team 5</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> </div> </div> </div> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> </div> </div> <div class="year"> <div class="flex-container"> <div class="team-zone-wrapper"> <div class="rpt-zone-header">TEAM A</div> <div class="rpt-zone-item">Team 1</div> <div class="rpt-zone-item">Team 2</div> <div class="rpt-zone-item">Team 3</div> <div class="rpt-zone-item">Team 4</div> </div> <div class="team-zone-wrapper" > <div class="rpt-zone-header">Team B</div> </div> </div> </div>

Answer 3

$('.team-zone-wrapper')是一個數組。 你必須遍歷每個 team-zone-wrapper

for (elm of $('.team-zone-wrapper')){
  if ( $(elm).children().length == 1 )  $(elm).hide()
}

更好的解決方案是實際檢查rpt-zone-item元素是否存在。 這里的優點是即使 A 隊是空的也能工作。

for (elm of $('.flex-container') ){
  for (cElm of $(elm).find('.team-zone-wrapper')){
    if ( $(cElm).children().length == 1 ) {
      $(cElm).hide();
      $(elm).find('.rpt-zone-header:visible').html('Teams')
    }
  }
}