时间戳

首页 > 解决方案 > 用 .parents() 选择一个特定的类？

javascript - 用 .parents() 选择一个特定的类？

问题描述

你可以将一个类传递给 jQuery 方法parents()吗？

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

如何在 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()函数吗？或者我应该为此使用另一个功能吗？

标签： javascriptjqueryhtml

解决方案

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

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

推荐阅读