用 .parents() 选择一个特定的类？答案

【问题标题】：selecting a specific class with .parents()?用 .parents() 选择一个特定的类？
【发布时间】：2018-12-14 05:44:53
【问题描述】：

你能把一个类传递给jQuery方法parents()吗？

我需要检查菜单项是否与数据属性匹配，以及是否更改了标题/链接的颜色。

How to find a parent with a known class in jQuery?

相关答案：

将选择器传递给 jQuery 父函数：

d.parents('.a').attr('id')

http://api.jquery.com/parents/

来自文档的示例代码：

<script>
function showParents() {
  $( "div" ).css( "border-color", "white" );
  var len = $( "span.selected" )
    .parents( "div" )
      .css( "border", "2px red solid" )
      .length;
  $( "b" ).text( "Unique div parents: " + len );
}
$( "span" ).click(function() {
  $( this ).toggleClass( "selected" );
  showParents();
});
</script>

这让我相信你可以将一个类传递给那个方法，但我猜不是这样。

我的代码：

$(function() {
var tagName = $("#content").data("item")
  $(".sub-menu a").each(function() {
    var menuItem = $(this).text().toLowerCase();
    if (menuItem == tagName) {
      $(this).parents(".big-link").addClass("red");
    }
  });
})

.red {
  color: red;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content" data-item="most important"></div>

<div id="menu">
  <a class="big-link" href="#">This Link should be RED</a>
  <ul class="sub-menu">
    <li>
      <a href="#">Most Important</a>
    </li>
    <li>
      <a href="#">Not Important</a>
    </li>
    <li>
      <a href="#">Not Important</a>
    </li>
    <li>
      <a href="#">Not Important</a>
    </li>
  </ul>
  <a class="big-link" href="#">This Link should be untouched</a>
  <ul class="sub-menu">
    <li>
      <a href="#">Not Important</a>
    </li>
    <li>
      <a href="#">Not Important</a>
    </li>
    <li>
      <a href="#">Not Important</a>
    </li>
  </ul>
</div>

期望是第一个列表上方的第一个链接应该是红色的，因为菜单项的内容和数据属性匹配。

在上面附加的答案中，它说使用.closest()

$(function() {
var tagName = $("#content").data("item")
  $(".sub-menu a").each(function() {
    var menuItem = $(this).text().toLowerCase();
    if (menuItem == tagName) {
      $(this).closest(".big-link").addClass("red");
    }
  });
})

.red {
  color: red;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content" data-item="most important"></div>

<div id="menu">
  <a class="big-link" href="#">This Link should be RED</a>
  <ul class="sub-menu">
    <li>
      <a href="#">Most Important</a>
    </li>
    <li>
      <a href="#">Not Important</a>
    </li>
    <li>
      <a href="#">Not Important</a>
    </li>
    <li>
      <a href="#">Not Important</a>
    </li>
  </ul>
  <a class="big-link" href="#">This Link should be untouched</a>
  <ul class="sub-menu">
    <li>
      <a href="#">Not Important</a>
    </li>
    <li>
      <a href="#">Not Important</a>
    </li>
    <li>
      <a href="#">Not Important</a>
    </li>
  </ul>
</div>

但这也不起作用。您可以将类名传递给.parents() 函数吗？或者我应该为此使用其他功能吗？

【问题讨论】：

问题是链接不是父级......它是父级的兄弟姐妹。
closest 和 parents 函数都在 DOM 的树形结构上。没有来自li 中的链接的元素具有类big-link。您必须转到sub-menu 父级，然后使用prev 才能到达前一个兄弟级。见stackoverflow.com/q/8591887/215552

标签： javascript jquery html

【解决方案1】：

问题是您不是在寻找父母，而是在寻找“叔叔”，它是父母的兄弟姐妹。所以找到最近的子菜单，而不是找到上一个兄弟。

$(function() {
var tagName = $("#content").data("item")
  $(".sub-menu a").each(function() {
    var menuItem = $(this).text().toLowerCase();
    if (menuItem == tagName) {
      $(this).closest(".sub-menu").prev(".big-link").addClass("red");
    }
  });
})

.red {
  color: red;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content" data-item="most important"></div>

<div id="menu">
  <a class="big-link" href="#">This Link should be RED</a>
  <ul class="sub-menu">
    <li>
      <a href="#">Most Important</a>
    </li>
    <li>
      <a href="#">Not Important</a>
    </li>
    <li>
      <a href="#">Not Important</a>
    </li>
    <li>
      <a href="#">Not Important</a>
    </li>
  </ul>
  <a class="big-link" href="#">This Link should be untouched</a>
  <ul class="sub-menu">
    <li>
      <a href="#">Not Important</a>
    </li>
    <li>
      <a href="#">Not Important</a>
    </li>
    <li>
      <a href="#">Not Important</a>
    </li>
  </ul>
</div>

【讨论】：