使用 .closest 函数时遇到问题

Question

我正在尝试为仪表板制作侧边栏菜单。我想用 .closest 实现它，因为它适合我的代码。这是我正在尝试做的一个简单示例：https://jsfiddle.net/eu8kjzh4/10/

为什么最近的跨度（在本例中是唯一的跨度）文本没有被替换为“-”？在我的代码中，我有

$('.' + Key).closest( '.' + Key ).css("color", "#000");

此代码运行良好，但 jsfiddle 中的代码运行不正常。

Answer 1

函数不正确：.closest(选择器)Returns：jQuery 说明：对于集合中的每个元素，通过测试元素本身并向上遍历其在DOM树

中的祖先来获取与选择器匹配的第一个元素

你想要的是 prev 找到元素

之前的第一个兄弟

$(document).ready(function() {
  $('.sub').prev('li').find('span').text('-');
});

Answer 2

来自 jQuery 文档

Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements

您的 span 既不是 DOM 中 div.sub 的父元素，也不符合 $(".sub") 规则。

让您的 jQuery 代码与您的 HTML 结构一起工作的唯一方法：

$("#plusMinus1").text("-");

或修改您的 HTML 结构以符合 .closest() 方法要求

Answer 3

Fiddle

当您前往 parent 时，您将到达 body。从那里你可以找到跨度。

$(document).ready(function() {
  $(".sub").parent().find("span").text("-");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<body>
  <li>
    <a class="selected" href="#" onclick="return false;">Dashboard 1 <span id="plusMinus1">+</span></a>
  </li>
  <div class="sub">
    <ul>
      <li><a id="s1" href="">Test A</a>
      </li>
      <li><a id="s2" href="">Test B</a>
      </li>
      <li><a id="s3" href="">Test C</a>
      </li>
    </ul>
  </div>
</body>

Answer 4

closest 向上遍历 DOM 并用于嵌套元素。

在您的标记中，您的 div 不是您的 span 的后代，甚至不是兄弟姐妹。

你有 1. 检索前一个兄弟（body之后的第一个li） 2. 找到li

里面的span

$(document).ready(function() {
  $(".sub").prev().find('span').text('-');
});

此外，在您的 fiddle 中，您忘记包含 jQuery。

这是一个工作代码：https://jsfiddle.net/qwc6pepr/1/

使用 .closest 函数时遇到问题

Trouble using .closest function

javascript

jquery

closest