jquery - CSS select 基于逻辑层级

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>