基于点击的两个重复类名称的元素ID

Question

我有两个不同id的div，但具有相同的类名。例如：窗口1 &窗口2 ...

<div id="Window1" class="name"> 
    <span id="Admin"></span> 
</div> 

<div id="Window2" class="name"> 
    <span id="Admin"></span> 
</div> 

我想获得“名”当我点击ID“管理员”的元素ID。显然，VAR解决方案是错误的，但下面要设置一些接近这个...

var Window_id = $(".name").attr("id"); 

我希望这说明了什么，我试图做的。提前致谢。

Answer 1

首先，您不能拥有两个具有相同ID的对象。所以你不能有两个对象id="Admin"。你将不得不给每个人一个不同的ID或使用一个共同的类名（或两者）。所以，你可以把它改成这样：

<div id="Window1" class="name"> 
    <span id="Admin1" class="admin"></span> 
</div> 

<div id="Window2" class="name"> 
    <span id="Admin2" class="admin"></span> 
</div> 

而且，然后使用这个jQuery来处理点击获取点击的对象的父的ID：多一点有效

$(".admin").click(function() { 
    var parentId = $(this).parent().attr("id"); 
}); 

，或者用少一点的jQuery：

$(".admin").click(function() { 
    var parentId = this.parentNode.id 
}); 

我最喜欢的选择实际上是这个，因为它是对某些HTML变化多了几分稳健的（如果一个新的div容器是围绕引进像跨度）：

$(".admin").click(function() { 
    var parentId = $(this).closest(".name").attr("id"); 
}); 

.parent()或.parentNode前两个选项一起使用上去的DOM hieararchy只有一个级别。

.closest(".name")在第三个选项中使用，根据需要调高父级层次结构，直到找到与传入选择器匹配的父级。它有点更强大，并且更有可能确保您获得所需的父代，即使HTML稍作更改。并不总是需要，但值得了解。

Answer 2

的click处理程序中使用此。

$(this).parent().attr("id"); 

$(this).parent()将获得这与name类的DIV父元素和attr('id')将得到的div元素的ID。

边注：理想情况下，页面上的元素ID应该是唯一的，你的标记没有。

我会建议，而不是有一个id管理span，有一个共同的类，并使用类选择器来选择它们。像这样的东西。

HTML

<div id="Window1" class="name"> 
    <span class="admin"></span> 
</div> 

<div id="Window2" class="name"> 
    <span class="admin"></span> 
</div> 

JS

$('.admin').click(function(){ 
    var parentId = $(this).parent().attr("id"); 

    //Or 
    var parentId = $(this).parent()[0].id; 

    //Or 
    var parentId = $(this).closest('.name').attr('id'); 

    //Or 
    var parentId = $(this).closest('.name')[0].id; 
}); 

Answer 3

你不能给同一个ID为2元。你正在给同样的身份证号码。

如果你有一个跨度和相同的类名不同的充标识，要获得父ID，你可以做到这一点

var parentID=$(".spanClassName").parent().attr("id"); 

假设spanClassName，客户可使用这两个类名跨越

$(".spanClassName").click(function(){  
    var parentID= $(this).parent().attr("id"); 
}); 

Answer 4

你不能有两个跨越同一个id“Admin”的跨度。试试这个

<div id="Window1" class="name"> 
    <span>Admin</span> 
</div> 

<div id="Window2" class="name"> 
    <span>Admin</span> 
</div> 

$('.name span').click(function(e){ 
    console.log($(this).parent('.name').attr('id')); 
}); 

Answer 5

<div id="Window1" class="name"> 
    <span class="Admin">a</span> 
</div> 

<div id="Window2" class="name"> 
    <span class="Admin">a</span> 
</div> 
<script> 
$('.Admin').on('click', function(){ 
    var id = $(this).parent().attr('id'); 
    alert(id); 
}); 
</script> 

您需要使用类“联系”，因为你比元素更加ID为“管理员”其他明智的。