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

但是，当然首先选择许多元素然后需要搜索正确的元素并不好。

CSS选择基于逻辑层次结构

2 个答案: