点击的div的id获取方法

Question

点击的div的id获取方法

3

当我在jQuery中点击当前div时，我希望选择它的id。
例如，假设我有以下HTML：

<div class="item"  id="10">hello world</div>
<div class="item_10">hello people</div>

当我点击具有 .item 类的第一个 div 时，我希望复制当前 div 的 id 并将其加上数字 (10)，使其等于第二个 div 类 = item_10 的 id，即 ("div id" + 10)。

我尝试使用 currentid = this.id; 但它不起作用 :( !

- CoreDo

1

请注意，"它不起作用"并不是对那些试图帮助您的人非常有帮助。您提供了一个相当好的描述，说明了您拥有和想要的内容，因此加一分。更好的方法是包括实际的工作测试案例（http://jsfiddle.net），而不是说“它不起作用”，而是说发生了什么。您是否收到错误？您是否得到了错误的结果？你的电脑是否着火了？ - Phrogz

5个回答

2

我认为您想要做的事情类似于：

$(".item").click(function(){
    var id = $(this).attr("id");
    var el = $(".item_" + id);
});

现在el是您的第二个div。

- Niels

2

你可以简单地使用this.id。

$('div').click(function() {
    var divid = this.id;
    alert($('.item_'+divid).html());
});

Demo

- Jayendra

2

+1 - 终于有人使用更简单、更快的 this.id 而不是 $(this).attr('id')。只有在确实更好的情况下才应该使用 jQuery。 - jfriend00

1

类似这样吗？

$('div').click(function() {
    theId = $(this).attr('id');
    //Do whatever you want with theId.
});

- Madara's Ghost

我不是那个点踩的人，但也许是因为你不必要地使用了jQuery。$(this).attr('id') 是一个更慢且更冗长的写法，而 this.id 则已经被提问者尝试过并且“不起作用”。 - Phrogz

0

可以这样做：

$('.item').click(function() {
var divId = $(this).attr("id");
});

- Sudhir Bastakoti

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phrogz · Accepted Answer

首先需要注意，在HTML4中，以数字开头的id属性是语法上不合法的。如果您使用了id="10"，请确保您使用的是HTML5文档类型（<!DOCTYPE html>）。

很难说为什么您之前所做的事情没有起作用，因为我们没有看到您的实际代码。可能是因为您在更高级别的元素（如body）上注册事件，并且this.id是该更高级别元素的id，而不是您单击的元素。

在这种情况下，您需要使用事件的target属性来查找您单击的内容。例如：

$(document.body).click(function(evt){
  var clicked = evt.target;
  var currentID = clicked.id || "No ID!";
  $(clicked).html(currentID);
})

实际演示：http://jsfiddle.net/Gra2P/

如果您要在特定元素上注册，则this.id有效：

$('div').click(function(evt){
  var currentID = this.id || "No ID!";
  $(this).html(currentID);
})

实际运行效果见：http://jsfiddle.net/Gra2P/1/

然而，这不是最佳方法，因为：

它会注册很多事件处理程序而不是一个，
如果在运行此代码后添加了其他div，它们将无法被处理。

在jQuery 1.7中，您可以使用.on方法在父元素上创建一个单一的事件处理程序，并使用选择器选择要捕获事件的元素类型，并将this设置为它们。代码如下：

$(document.body).on('click','div',function(evt){
  var currentID = this.id || "No ID!";
  $(this).html(currentID);
})

Seen in action: http://jsfiddle.net/Gra2P/2/