javascript - 如何通过 Jquery 访问正确的标签

Question

有一个结构如下的html页面:

<div class="row sem">
 <div class="subject"><h3>A</h3></div>
 <div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
 <div class="subject"><h3>C</h3></div>
 <div class="subject"><h3>D</h3></div>
</div>

我在最上面的 div 上附加了一个悬停事件:

$(".row.sem").hover(function(){
//my code....
});

现在，当我将鼠标悬停在其中一个 div 上时，我只想访问我悬停的 div 元素内的那些 h3 元素的内部内容。

为此，我尝试了:

var a = $(this).children(["h3"]);
 for(ei in ee){                
   console.log(ei);     
  }

但是，这会打印出更多的内容，例如淡入、淡出、滚动...。this 对象不包含悬停的 div 的内部标签。 p>

请指出此实现中的错误。

谢谢。

Answer 1

.children() 在您寻找 h3 时收集直接子元素。因此，您可以使用 .find() 方法，甚至(更具体).children('.subject').children('h3')。

$(".row.sem").hover(function(){
  // mouse enter
  var a = $(this).find("h3");
  a.each(function(){
    console.log($(this).text());
  });
}, function(){
    // mouse leave
    console.clear();
    // ...
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sem">
 <div class="subject"><h3>A</h3></div>
 <div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
 <div class="subject"><h3>C</h3></div>
 <div class="subject"><h3>D</h3></div>
</div>

参见:https://api.jquery.com/children/