jQuery選擇了與經常性的元素相同的元素

Question

我有下面的HTML結構

現有

<fieldset> 
 
     .... 
 
     <div> 
 
      <div class="responsive"></div> 
 
     </div> 
 
     ... 
 
     <fieldset> 
 
      .... 
 
      <div class="responsive"></div> 
 
     </fieldset> 
 
     ... 
 
     <div class="responsive"></div> 
 
     <fieldset> 
 
     <div> 
 
      <div class="responsive"></div> 
 
     </div> 
 
     </fieldset> 
 
    </fieldset> 
 
    <div class="responsive"></div> 
 
    <fieldset> 
 
     ..... 
 
     <div class="responsive"></div> 
 
     <div class="responsive"></div> 
 
     <fieldset> 
 
      ........ 
 
      <div class="responsive"></div> 
 
      <fieldset> 
 
        ........ 
 
       <div class="responsive"></div> 
 
      </fieldset> 
 
     </fieldset> 
 
    </fieldset> 
 
    <div class="responsive"></div>

編輯
1）。響應可能有任何沒有。父母直到.reponsive和字段集之間的字段集

2）他們可能有兄弟姐妹在下面和後

我需要寫jQuery選擇在字段集，但到第1級找到.responsive只有這樣我應該修正寬度。即

fieldset -> .responsive (correct) (result may contain 1 or more) 
fieldset -> .responsive -> fieldset -> .responsive (wrong) 
.responsive (wrong) 

但是通過這個選擇，我應該能夠僅在字段集選擇所有.responsive DIV與和保持寬度它。

預期輸出

<fieldset> 
 
     .... 
 
     <div> 
 
      <div class="responsive" style="width:xpx;"></div> 
 
     </div> 
 
     ... 
 
     <fieldset> 
 
      .... 
 
      <div class="responsive" style="width:yzpx;"></div> 
 
     </fieldset> 
 
     ... 
 
     <div class="responsive"></div> 
 
     <fieldset> 
 
     <div> 
 
      <div class="responsive" style="width:xypx;"></div> 
 
     </div> 
 
     </fieldset> 
 
    </fieldset> 
 
    <div class="responsive"></div> 
 
    <fieldset> 
 
     ..... 
 
     <div class="responsive" style="width:xzpx;"></div> 
 
     <div class="responsive" style="width:zpx;"></div> 
 
     <fieldset> 
 
      ........ 
 
      <div class="responsive" style="width:xzpx;"></div> 
 
      <fieldset> 
 
        ........ 
 
       <div class="responsive" style="width:yzpx;"></div> 
 
      </fieldset> 
 
     </fieldset> 
 
    </fieldset> 
 
    <div class="responsive"></div>

Answer 1

請檢查：

$(document).ready(function() { 
 
    $("fieldset > .responsive").css("background", "gray").text("width:xyzpx;"); 
 
});

.responsive { 
 
    width: 100px; 
 
    height: 40px; 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<fieldset> 
 
    1<div class="responsive"></div> 
 
    <fieldset> 
 
    2<div class="responsive"></div> 
 
    </fieldset> 
 
    3<div class="responsive"></div> 
 
    <fieldset> 
 
    4<div class="responsive"></div> 
 
    </fieldset> 
 
</fieldset> 
 
5<div class="responsive"></div> 
 
<fieldset> 
 
    6<div class="responsive"></div> 
 
    7<div class="responsive"></div> 
 
    <fieldset> 
 
    8<div class="responsive"></div> 
 
    <fieldset> 
 
     9<div class="responsive"></div> 
 
    </fieldset> 
 
    </fieldset> 
 
</fieldset> 
 
10<div class="responsive"></div>

Answer 2

這將選擇所有在<fieldset>之下的.responsive元素，但同時不在任何第2級<fieldset>之下。使用CSS選擇像這樣

$("fieldset :not(fieldset) .responsive").css("width", "xyzpx"); 

在我爲一個例子提到background-color摘錄

1）。

$("fieldset :not(fieldset) .responsive").css("background-color", "blue");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset> 
 
     <div class="responsive" style="width:xyzpx;"></div> 
 
     <fieldset> 
 
      <div class="responsive" style="width:xyzpx;"></div> 
 
     </fieldset> 
 
     <div class="responsive" style="width:xyzpx;"></div> 
 
     <fieldset> 
 
      <div class="responsive" style="width:xyzpx;"></div> 
 
     </fieldset> 
 
    </fieldset> 
 
    <div class="responsive" style="width:xyzpx;"></div> 
 
    <fieldset> 
 
     <div class="responsive" style="width:xyzpx;"></div> 
 
     <div class="responsive" style="width:xyzpx;"></div> 
 
     <fieldset> 
 
      <div class="responsive" style="width:xyzpx;"></div> 
 
      <fieldset> 
 
       <div class="responsive" style="width:xyzpx;"></div> 
 
      </fieldset> 
 
     </fieldset> 
 
    </fieldset> 
 
    <div class="responsive"></div>