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) { 
     // ... 
    } 
}); 

但是，当然，先选择很多元素然后再寻找合适的元素并不好。