jQuery parent selector not working with two groups of divs-CodePudding

I have the fallowing case where I want to find the 4th parent who has an especific width value, and having that modify the font-size a child, like this:

HTML

<div class='parent4-a'>
  <div class='parent3'>
    <div class='parent2'>
      <div class='parent1'>
        <div class='parent0'>
          <div class='child'>
            <p>Hello World?</p>
          </div>
         </div>
       </div>
     </div>
  </div>
</div>

CSS

.parent4-a{  
  width:600px;
}

.child{
  background-color:grey;
  width:100%;
}
p{
  font-size:15px;
}

jQuery

$(function() {
  if($('.child').parents().eq(4).css('width') >='595px'){
  $('.child p').css({'font-size':'25px'})  
}
});

it can be seen it in this pen: https://codepen.io/jotasMAJA/pen/ZEJmXdd

But, when I've tried to implement the same behaviour having another group of divs, changing the class name of the 5th parent the jQuery code doesn't work?

like this:

HTML Adding the same but having two 5th parent, parent4-a and parent4-b:

<div class='parent4-a'>
  <div class='parent3'>
    <div class='parent2'>
      <div class='parent1'>
        <div class='parent0'>
          <div class='child'>
            <p>Hello World?</p>
          </div>
         </div>
       </div>
     </div>
  </div>
</div>

<div class='parent4-b'>
  <div class='parent3'>
    <div class='parent2'>
      <div class='parent1'>
        <div class='parent0'>
          <div class='child'>
            <p>Hello World?</p>
          </div>
         </div>
       </div>
     </div>
  </div>
</div>

CSS Defining now different width sizes, being at both sides of the jQuery condition:

.parent4-b{  
  width:300px;
}
.parent4-a{  
  width:600px;
}

.child{
  background-color:grey;
  width:100%;
}
p{
  font-size:15px;
}

jQuery remains the same

you can see it in this pen: https://codepen.io/jotasMAJA/pen/xxLmxLE

and this is my question:

What must be done to have change the font size of the p tag related with the width in the 5th parent?

Why the jQuery code works only for one single group of divs?

thanks in advanced

CodePudding user response：

You have multiple .child elements so you have to loop trouch every .child element.

You can use .each() method of jquery.

$(function() {
  $('.child').each(function( index ) {
     if($(this).parents().eq(4).css('width') >='595px'){
        $('p', this).css({'font-size':'25px'})  
      }
  });
  
});

.parent4-b{  
  width:300px;
}
.parent4-a{  
  width:600px;
}

.child{
  background-color:grey;
  width:100%;
}
p{
  font-size:15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent4-a'>
  <div class='parent3'>
    <div class='parent2'>
      <div class='parent1'>
        <div class='parent0'>
          <div class='child'>
            <p>Hello World?</p>
          </div>
         </div>
       </div>
   </div>
  </div>
</div>



<div class='parent4-b'>
  <div class='parent3'>
    <div class='parent2'>
      <div class='parent1'>
        <div class='parent0'>
          <div class='child'>
            <p>Hello World?</p>
          </div>
         </div>
       </div>
   </div>
  </div>
</div>

CodePudding user response：

You need to loop through each .child to get it to work.
Here's an example:

$(function() {
  $('.child').each(function() {
    if($(this).parents().eq(4).css('width') >='595px') {
      $('p', this).css({'font-size':'25px'})  
    }
  })
})

CodePudding user response：

If you call .eq() it starts counting the fist element with 1 (not starting with 0 like an Array). So if you want the 5th parent you actually have to call .eq(5) on the parents:

if ($(".child").parents().eq(5).css("width") >= "595px") {
  $(".child p").css({ "font-size": "25px" });
}