获取孩子Jquery的类名

Posted 2023-05-09

【中文标题】获取孩子Jquery的类名

【英文标题】：Getting class name of children Jquery

【发布时间】：2021-06-09 21:05:24

【问题描述】：

我正在尝试使用 jquery 获取嵌套在列表项中的特定 div 的类名。当我将鼠标悬停在列表项上时，它当前返回未定义。我需要的类名是特定 div 的第二个类名，因此例如 <div class="navlink-underline navlink-underline-one"></div> 这个 div navlink-underline 将是第一类，navlink-underline-one 是第二类。第二节课是我想要返回的。

$('.nav-link').mouseenter(function() 
  console.log($(this).children().attr('class'))
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-list">
  <li><a class="nav-link navlink-one" href="">Home</a><div class="navlink-underline navlink-underline-one"></div></li>
  <li><a class="nav-link navlink-two" href="">About Us</a><div class="navlink-underline navlink-underline-two"></div></li>
  <li><a class="nav-link navlink-three" href="">Products</a><div class="navlink-underline navlink-underline-three"></div></li>
  <li><a class="nav-link navlink-four" href="">References</a><div class="navlink-underline navlink-underline-four"></div></li>
  <li><a class="nav-link navlink-five" href="">Contact</a><div class="navlink-underline navlink-underline-five"></div></li>
</ul>

【参考方案1】：

问题在于navlink-underline 元素的选择。您尝试使用 children() 方法来选择它，但这仅在您正在寻找的元素是孩子时才有效。在您的情况下，它是 下一个兄弟。 next() 方法将帮助您获取该元素。

您需要从那里访问您正在寻找的元素的classList 属性，并对该属性使用item 方法来选择其列表中的第二个类。

$('.nav-link').on('mouseenter', function() 
  const $this = $(this);
  const $underline = $this.next();
  const secondClass = $underline.get(0).classList.item(1);
  console.log(secondClass);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-list">
  <li><a class="nav-link navlink-one" href="">Home</a><div class="navlink-underline navlink-underline-one"></div></li>
  <li><a class="nav-link navlink-two" href="">About Us</a><div class="navlink-underline navlink-underline-two"></div></li>
  <li><a class="nav-link navlink-three" href="">Products</a><div class="navlink-underline navlink-underline-three"></div></li>
  <li><a class="nav-link navlink-four" href="">References</a><div class="navlink-underline navlink-underline-four"></div></li>
  <li><a class="nav-link navlink-five" href="">Contact</a><div class="navlink-underline navlink-underline-five"></div></li>
</ul>

【参考方案2】：

这是我的建议

$('.nav-link').mouseenter(function() 
  console.log($(this).attr('class').split(/\s+/)[1]);
);

【参考方案3】：

这是你的答案

$('li').mouseenter(function() 
  console.log($(this).children("div").attr('class').split(/\s+/)[1]);
);