选择相邻元素的子元素

Question

我正在尝试使用 .parents 来 select 相邻 ul 中的一个元素，以便我可以单击一个来影响另一个。

我可以 select 两个 ul 的父 .outside，从 .ulB 内的跨度开始但是当我要求它返回并且 select .ulA 它不喜欢它.

有什么想法吗？有可能使用这种方法或根本无法做到这一点吗？谢谢

示例代码如下。

<!DOCTYPE html>
<html>
<head>

<style>
  .ancestors * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("span").parents(".outside > .ulA").css({"color": "red", "border": "2px solid red"});
});
</script>

</head>

<body class="ancestors">
  <div class="outside" style="width:500px;">

    <ul class="ulA">  
      <li></li>
    </ul>

    <ul class="ulB">
      <li>
        <span>span</span>
      </li>
    </ul>

  </div>
</body>

</html>

Answer 1

没有 parent 个 span 匹配 .outside > .ulA。您需要先找到 parent，然后找到 .ulA 后代：

$("span").
  parents(".outside").
  find(".ulA").
  css({"color": "red", "border": "2px solid red"});

  $("span").parents(".outside").find(".ulA").css({
    "color": "red",
    "border": "2px solid red"
  });

  .ancestors * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ancestors">
  <div class="outside" style="width:500px;">

    <ul class="ulA">
      <li></li>
    </ul>

    <ul class="ulB">
      <li>
        <span>span</span>
      </li>
    </ul>

  </div>
</div>

Answer 2

parents 选择器不存在。

您首先需要找到 parent 和然后在其中搜索。

也 - 使用 closest。您不需要 parents（除非稍后过滤），而且它比 parent 更快。closest 已经 returns 第一场比赛。

$("span").closest(".outside").find(".ulA").css({"color": "red", "border": "2px solid red"});

选择相邻元素的子元素

Selecting a child element of an adjacent element

javascript

jquery

parent-child