如何通过 Jquery 访问正确的标签答案

【问题标题】：how to access correct tag through Jquery如何通过 Jquery 访问正确的标签
【发布时间】：2017-11-28 13:49:54
【问题描述】：

有一个带有结构的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);     
  }

但是，这打印了更多的东西，比如 fadein,fadeout,scroll...。this 对象不包含悬停 div 的内部标签。

请提出这个实现中的问题。

谢谢。

【问题讨论】：

标签： javascript jquery html css

【解决方案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/

【讨论】：

我可以限制它只在第一次悬停时打印吗？它每次都会打印，这不是必需的。
是的，您可以将.hover() 更改为.one('mouseenter')。这是一个例子：jsfiddle.net/ruxv3axv。另见：api.jquery.com/one。我建议您深入了解.on() 和.off()，它们非常有帮助。
有一些方法。当您执行循环时，您有一个索引，因此您可以通过其索引识别 div。另一个解决方法（更好地保持清晰）是您可以使用 html data-* 属性。例如：jsfiddle.net/o68vt0nh
是的，我从你的回答中知道了。谢谢。不小心，我之前的评论被删除了。
你能看看这个问题吗：stackoverflow.com/questions/44748781/…

【解决方案2】：

这将获得.row.sem 元素的h3 子元素的内容。您需要获取您悬停的 div 的所有子项。您可以使用.html() 访问和修改这些孩子的 html 内容，我建议您研究该方法。

$(".row.sem").hover(
  function() {
    console.log($(this).children().text());
  }, function (){}
);

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

【讨论】：

【解决方案3】：

简洁明了。

$(".row.sem").hover(function() {
  $(this).find("h3").each(function() {
    console.log($(this).text());
  });
});

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

【讨论】：

【解决方案4】：

如果您查看 MDN 文档 for in loop，它会说它遍历“可枚举的属性”。也检查这个帖子enumarable properties

看看这个。

$(".row.sem").hover(function(){

  // i am list of all headers nested inside element with class "row" and "sem"
  //  elements(array)
  var headers = $(this).find('h3');
   
   // console first element's html from the array.
   console.log($(headers[0]).html())
  

});

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

【讨论】：