Question

您可以将类传递给jQuery方法parents()吗？

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

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

相关答案：

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

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>

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

在上述附加答案中，它说要使用.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()函数吗？还是我应该为此使用另一个功能？

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

选择一个特定的类与.parents（）？

1 个答案: