Applying styles based on jquery conditions

Question

I have a following html as follows:

    <div class="outerdiv">
      <div class="title">
      <div class="innerdiv">
        <div class="outerdiv">
         <div class="title">
         <div class="innerdiv">
          <div class="outerdiv">
           <div class="innerdiv>
<div class="outerdiv">
         <div class="title">
         <div class="innerdiv">
</div>
</div>
</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

I have to apply "border-width:10px" for all divs with class = innerdiv provided that "outerdiv" contains both "title" and "innerdiv" . My expected output is:

    <div class="outerdiv">
      <div class="title">
      <div class="innerdiv" style="border-width:10px">
        <div class="outerdiv">
         <div class="title">
         <div class="innerdiv" style="border-width:10px">
          <div class="outerdiv">
           <div class="innerdiv>
<div class="outerdiv">
         <div class="title">
         <div class="innerdiv" style="border-width:10px">
</div>
</div>
</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

I am trying this:

$(element).find(".outerdiv").not("[class="title"]).css("border-width","10px").

Edit: The number of divs are dynamic and not fixed in number

Milind Anantwar · Accepted Answer · 2016-05-30 06:29:41Z

3

You need to use :has selector along with immediate child selector to target innerdiv element:

$('.outerdiv:has(.innerdiv):has(.title) > ,.title > .innerdiv ').css("border-width","10px");

DEMO SNIPPET :

$(function(){
$('.outerdiv:has(.innerdiv):has(.title) > .title > .innerdiv ').css("border-width","100px").css('border' ,'1px solid grey')
}) ;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="outerdiv">
  <div class="title">1
  <div class="innerdiv">2
    <div class="outerdiv">3
     <div class="title">4
     <div class="innerdiv">5
      <div class="outerdiv">6
       <div class="innerdiv">7
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

edited May 30, 2016 at 6:29

answered May 30, 2016 at 6:14

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GeorgeButter · Accepted Answer · 2016-05-30 06:16:17Z

0

You can do this with good css hierarchy just apply the styles to

 .outerdiv > .title > .innerdiv{
    css goes here
 }

and they will only affect divs in the hierarchy that you mentioned.

answered May 30, 2016 at 6:16

GeorgeButter

2,5891 gold badge32 silver badges50 bronze badges

Comments

Dhara Parmar · Accepted Answer · 2016-05-30 06:13:53Z

-1

Simply use:

$('.innerdiv').css('border-width','10px');

It will add border-width to all divs with class 'innerdiv'.

answered May 30, 2016 at 6:13

Dhara Parmar

8,1231 gold badge19 silver badges27 bronze badges

Collectives™ on Stack Overflow

Applying styles based on jquery conditions

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related