CODEWITHSUNDEEP
javascripthtmljquerycss
Learning
Learning

Reputation: 20001

check if div has xx class to hide and show parent element

I want to hide hide Team B in each class flex-container if class team-zone-wrapper doesn't contain class rpt-zone-item and change the name of of Team A to Teams

Code pen https://codepen.io/KGuide/pen/mdPzvKB

as shown in image enter image description here

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>

In above code hide part is not working i am not able to hide element using

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

Upvotes: 0

Views: 128

Answers (3)

Mamun
Mamun

Reputation: 68933

You can loop through all the elements with .team-zone-wrapper, then check if the length of the children is less than 2 to hide that element:

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

Upvotes: 1

charlietfl
charlietfl

Reputation: 171669

Single chain using not() and letting jQuery do all the looping internally

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

Upvotes: 2

HymnZzy
HymnZzy

Reputation: 2925

$('.team-zone-wrapper') is an array. You'll have to loop through each of the team-zone-wrapper

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

Even better solution is to actually check if rpt-zone-item element exists. The advantage here is this works even if Team A is empty.

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')
    }
  }
}

Upvotes: 1

Related Questions