2016-05-30 201 views
1

我有一個下面的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所有div規定「outerdiv」既包含「冠軍」和「 innerdiv「 。 我的預期成果是:

<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"). 

編輯:申報單的數量是動態的,而不是固定數量

回答

3

您需要使用: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>

-1

只需使用:

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

它將爲類'innerdiv'的所有div添加border-width。

0

你可以做到這一點良好的CSS層次結構只是將樣式應用於

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

它們只會影響您提到的層次結構中的div。