CSS選擇基於邏輯層次

Question

與.container類HTML標籤形成我的情況是這樣一個邏輯層次：

<div class="container" data-id="1"> 
    Level 1 #1 
    <div>abc</div> 
    <div class="container" data-id="1"> 
     Level 2 #1 
     <div>other div container 
      <div class="container" data-id="1"> 
       Level 3 #1 
      </div> 
      <div class="container" data-id="2"> 
       Level 3 #2 
      </div> 
     </div> 
    </div> 
    <div>other div container 
     <div>other div container 
      <div class="container" data-id="2"> 
       Level 2 #2 
      </div> 
     </div> 
    </div> 
</div> 
<div class="container" data-id="2"> 
    Level 1 #2 
</div> 

現在我想基於該層次結構的路徑元素來選擇層次結構中的一個元素使用jQuery這樣的：

$('.container[data-id="1"] .container[data-id="2"]').css("color", "red"); 

因此，我想有Level 2 #2是紅色的，而不是Level 3 #2。

我試圖使用像這個jsFiddle :not()選擇器，但它沒有工作。

http://jsfiddle.net/zwg8cbg3/

是否與一個jQuery CSS選擇器的任何解決方案？

Answer 1

使用直接兄弟選擇：

$('.container[data-id="1"] > div > .container[data-id="2"]').css("color", "red"); 

片段

$('.container[data-id="1"] > div > .container[data-id="2"]').css("color", "red");

div { 
 
    margin-left: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="container" data-id="1"> 
 
    Level 1 #1 
 
    <div>abc</div> 
 
    <div class="container" data-id="1"> 
 
    Level 2 #1 
 
    <div>other div container 
 
     <div class="container" data-id="1"> 
 
     Level 3 #1 
 
     </div> 
 
     <div class="container" data-id="2"> 
 
     Level 3 #2 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div>other div container 
 
    <div>other div container 
 
     <div class="container" data-id="2"> 
 
     Level 2 #2 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container" data-id="2"> 
 
    Level 1 #2 
 
</div>

Answer 2

由於沒有答案了它的實現這樣的：

var cssSelector = ""; 
var ids = this.scriptStack.split("_"); 
$(ids).each(function(){ 
    cssSelector+=".container[data-id='"+this+"'] "; 
}); 
$('...').find(cssSelector).each(function(){ 
    if($(this).parents('.container').size() == ids.length-1) { 
     // ... 
    } 
}); 

但是，當然，先選擇很多元素然後再尋找合適的元素並不好。