如何使用 jQuery 获取特定类的 ID？

Question

我有一些类名为 hover 的 div 元素，这些 div 元素的父 div 具有类名 hoverparent 但这些父元素的 id 不同。

将鼠标悬停在 .hover div 元素上时是否可以获取相应 .hoverparent 元素的 ID？

我试图通过以下方式得到这个：

$('.hoverparent').attr('id')

但它每次都给出相同的第一个父 ID。

结构如下：

<div class="hoverparent" id="hover-1">
<div class="hover">ABC</div>
</div>
<div class="hoverparent" id="hover-2">
<div class="hover">DEF</div>
</div>

Answer 1

您需要使用 parent 或 closest 函数遍历 DOM 树以查找您要查找的“父”元素

$(".hover").hover(function() {
    var $parent = $(this).closest(".hoverparent");
    alert($parent.attr("id"));
});

： 父级 和最接近的是第一个仅当 .hoverparent 元素是 .hover 元素的直接父级时才起作用； closest 将向上搜索所有祖先来找到它。

Answer 2

在悬停回调中尝试 $(this).parent().attr('id') 。

Answer 3

$('.hover').mouseover(function() {
    $(this).parent().attr('id');
});

Answer 4

不要称你的班级为悬停。这应该有效

$(".hover").hover(
  function () {
   var id =  $(this).parent().attr('id');
  });

Answer 5

像这样添加每个循环：

$(".hoverparent").each(function(){
    var id=$(this).attr("id");
    alert(id);
 });

Answer 6

在悬停事件的处理程序中使用父方法：

$('.hover').hover(function(evt){
    var par = $(this).parent().attr('id');
    //Now do with ID what you need
},
function(evt){
    //presumably you don't need anything for mouseout
});

Answer 7

您可以尝试 parent() 方法。
像这样：

$('a').click(function(){
  var parentId = $(this).parent('div.hoverparent').attr('id');
});

Answer 8

请尝试以下操作：

$('.hover').hover(function() {
    var parentID = $(this).parent().attr('id');    alert(parentID);
});

Answer 9

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

console.log($(this).closest(".hoverparent").attr("id"));
});

这是小提琴http://jsfiddle.net/9dJJ9/1/show/