Question

我正在尝试为信息中心制作侧边栏菜单。我想用.closest来实现它，因为它适合我的代码。以下是我正在尝试做的一个简单示例：https://jsfiddle.net/eu8kjzh4/10/

为什么最近的跨度（以及本例中唯一的跨度）文本不是用' - '替换？在我的代码中，我有

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

这段代码工作正常，但jsfiddle中的代码却没有。

Answer 1

不正确的函数：.closest（selector）返回：jQuery 描述：对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素

你想要的是找到元素

之前的第一个兄弟的prev

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

Answer 2

来自jQuery文档

给定一个表示一组DOM元素的jQuery对象，.closest（）方法在DOM树中搜索这些元素及其祖先并构造一个新的来自匹配元素的jQuery对象

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

使jQuery代码适用于HTML结构的唯一方法是：

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

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

Answer 3

LOAD DATA documentation

当你去找父母时，你最终会进入体内。从那里你可以找到跨度。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

在你的标记中，你的div不是你跨度的后代，甚至不是兄弟。

你有 1.检索先前的兄弟姐妹（li之后的第一个body） 2.在span

中找到li

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

另外，在你的小提琴中，你忘了包含jQuery。

这是一个有效的代码：https://jsfiddle.net/qwc6pepr/1/

使用.closest函数时遇到麻烦

4 个答案: