Question

这是我的摘录：

$( document ).ready(function() {
	//$(".tree-node").parents('.tree-child-folders').css("color", "red");
  //$(".tree-collapsed:has(.tree-child-folders)").css("color", "red");
  $(".tree-node > .tree-collapsed:has(.tree-child-folders)").css("color", "red");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tree-node">
  <span class="tree-child-folders tree-line">TEST1</span>
  <span class="tree-collapsed">CHANGE COLOR</span>
  <span class="tree-test">TEST3</span>
</div>

<div class="tree-node">
  <span class="tree-child-folders tree-line">TEST4</span>
  <span class="tree-other">TEST5</span>
  <span class="tree-test">TEST6</span>
</div>

<div class="tree-node">
  <span class="tree-line">TEST7</span>
  <span class="tree-collapsed">TEST8</span>
  <span class="tree-test">TEST9</span>
</div>

我想将红色放置在包含类<span>的{{1}}上，并在同一级别上将.tree-collapsed包含类<span>

我想知道是否可以只使用CSS吗？

Answer 1

使用具有常规后继同级选择器~的css可以做到这一点（表示元素在此同级选择器之后，但不一定紧接在之后）或下一个同级选择器+

.tree-node > .tree-child-folders ~ .tree-collapsed {
color: red;
}

<div class="tree-node">
  <span class="tree-child-folders tree-line">TEST1</span>
  <span class="tree-collapsed">CHANGE COLOR</span>
  <span class="tree-test">TEST3</span>
</div>

<div class="tree-node">
  <span class="tree-child-folders tree-line">TEST4</span>
  <span class="tree-other">TEST5</span>
  <span class="tree-test">TEST6</span>
</div>

<div class="tree-node">
  <span class="tree-line">TEST7</span>
  <span class="tree-collapsed">TEST8</span>
  <span class="tree-test">TEST9</span>
</div>

Answer 2

如果您特别想使用jQuery（而不是CSS）来进行此操作，则可以使用sibling combinator，前提是.tree-child-folders元素位于.tree-collapsed元素之前。例如，使用“ subsequent sibling combinator”（~）：

$(document).ready(function() {
    $(".tree-node > .tree-child-folders ~ .tree-collapsed").css("color", "red");
});

实时示例：

$(document).ready(function() {
    $(".tree-node > .tree-child-folders ~ .tree-collapsed").css("color", "red");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tree-node">
  <span class="tree-child-folders tree-line">TEST1</span>
  <span class="tree-collapsed">CHANGE COLOR</span>
  <span class="tree-test">TEST3</span>
</div>

<div class="tree-node">
  <span class="tree-child-folders tree-line">TEST4</span>
  <span class="tree-other">TEST5</span>
  <span class="tree-test">TEST6</span>
</div>

<div class="tree-node">
  <span class="tree-line">TEST7</span>
  <span class="tree-collapsed">TEST8</span>
  <span class="tree-test">TEST9</span>
</div>

但是，如果该顺序不可靠，则看不到循环的替代方法：

// Find all `.tree-node > .tree-collapsed` and loop through them
$(".tree-node > .tree-collapsed").each(function() {
    var $this = $(this);
    // Does this parent also contain a `.tree-child-folders`?
    if ($this.parent().find(".tree-child-folders").length) {
        // Yes, make it red
        $this.css("color", "red");
    }
});

实时示例：

$(document).ready(function() {
    // Find all `.tree-node > .tree-collapsed` and loop through them
    $(".tree-node > .tree-collapsed").each(function() {
        var $this = $(this);
        // Does this parent also contain a `.tree-child-folders`?
        if ($this.parent().find(".tree-child-folders").length) {
            // Yes, make it red
            $this.css("color", "red");
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tree-node">
  <span class="tree-child-folders tree-line">TEST1</span>
  <span class="tree-collapsed">CHANGE COLOR</span>
  <span class="tree-test">TEST3</span>
</div>

<div class="tree-node">
  <span class="tree-child-folders tree-line">TEST4</span>
  <span class="tree-other">TEST5</span>
  <span class="tree-test">TEST6</span>
</div>

<div class="tree-node">
  <span class="tree-line">TEST7</span>
  <span class="tree-collapsed">TEST8</span>
  <span class="tree-test">TEST9</span>
</div>

选择器检查类是否存在于同一级别

2 个答案: