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

Question

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

将.hoverparent悬停在.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"));
});

之间的区别parent和closest是，如果第一个只会工作.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(){

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

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

Answer 9

请尝试以下操作：

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