Применение стилей в зависимости от условий Jquery

Question

У меня есть следующий HTML следующим образом:

<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> 

я должен применять "border-width:10px" для всех дивы с class = innerdiv при условии, что «outerdiv» содержит как «название» и " внутреннийdiv " . Мой ожидается выход:

<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> 

Я пытаюсь это:

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

Edit: Количество дивы динамичны и не фиксируется в количестве

Answer 1

Вы должны использовать :has селектор вместе с немедленным селектором ребенка целевой innerdiv элемент:

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

DEMO сниппета:

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

Answer 2

Просто используйте:

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

Он добавит границу ширины ко всем div с классом 'innerdiv'.

Answer 3

Вы можете сделать это с хорошая иерархия css просто применяет стили к

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

и они будут влиять только на divs в иерархии, о которой вы упомянули.