获取 class 孩子的名字 Jquery

Question

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

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

Answer 1

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

从那里你需要访问你正在寻找的元素的classList属性，并使用该属性上的item方法到 select 其列表中的第二个 class 。

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

Answer 2

这是我的建议

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

Answer 3

这是你的答案

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