javascript - 选择相邻元素的子元素

标签 javascript jquery parent-child

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

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

最佳答案

span 没有与 .outside > .ulA 匹配的父级。您需要先找到父代,然后找到.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>

关于javascript - 选择相邻元素的子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32573202/

相关文章:

javascript - 在 div 中禁用 html

javascript - 如何将变量值插入for循环数组

javascript - 滚动经过特定 div 后隐藏 div

javascript - 小时候打开 fancybox(iframe)?

css - 将父级扩展为 float 子级 div

html - 无效的 html 标记

javascript - 允许用户通过 json 对象配置设置

javascript - 添加 require 关键字会破坏原生 JavaScript 函数

javascript - AJAX BitMovin - GET 请求不起作用

javascript - 更快地找到具有频率值的二维关键字数组的出现