CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2630764
user2630764

Reputation: 622

Applying styles based on jquery conditions

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

Upvotes: 1

Views: 264

Answers (3)

Milind Anantwar
Milind Anantwar

Reputation: 82231

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>

Upvotes: 3

GeorgeButter
GeorgeButter

Reputation: 2591

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.

Upvotes: 0

Dhara Parmar
Dhara Parmar

Reputation: 8101

Simply use:

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

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

Upvotes: -1

Related Questions