Question

我试图使用.parents选择相邻ul中的元素，以便我可以单击一个来影响另一个元素。

我可以从.ulB中的跨度开始选择两个ul的父.outside但是当我要求它返回并选择.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

span匹配.outside > .ulA没有父母。你需要先找到父母，然后找到.ulA后代：

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

父母选择器不存在。

您首先需要找到父母，然后然后在其中进行搜索。

另外 - 使用closest。您不需要parents（除非稍后过滤），并且速度比parent快。closest已经返回第一个匹配。

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

选择相邻元素的子元素

2 个答案: