CSS選擇基於邏輯層次

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

<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選擇器的任何解決方案？

來源

2015-09-07 Sandro

如果沒有簡單的解決方案就像使用一行CSS選擇器一樣，我可以遍歷'$（'。container [data-id =「1」] .container [data-id =「2」]' ）'，並使用具有與層次結構級別相對應的父級'.container'元素的數量（減1，因爲當前元素不會是父級）。在本例中，它將是'.container [data-id =「2」]'的一個父'.container'元素。 – Sandro

使用直接兄弟選擇：

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

來源

2015-09-07 22:18:28

它仍然不會選擇「2級＃2」嗎？ – Sandro

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

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

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

來源

2015-09-08 21:07:16 Sandro

CSS選擇基於邏輯層次

回答

相關問題