获取点击的div的ID [英] Get the id of the clicked-upon div

查看:779
本文介绍了获取点击的div的ID的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在jQuery中点击当前div的 id

例如,假设我有这样的HTML :

 < div class =itemid =10> hello world< / div> 
< div class =item_10> hello people< / div>

当我点击 .item class,我想复制当前div的 id 并添加数字(10),所以它会是(div我尝试使用 currentid = this。这是我的第二个开发类= item_10。我尝试使用 currentid = this。 id; 但它不起作用:(!

解决方案

首先,请注意 id 以数字开头的属性在HTML4中在语法上是非法的。如果您使用 id =10请确保您使用的是HTML5 doctype(<!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 /



然而,这是次理想的,因为:


  1. 它使许多事件处理程序注册而不是1,并且
  2. 如果在运行代码后将其他div添加到文档中,它们将不会被处理。 / li>

在jQuery 1.7中,使用 .on 方法在父元素上创建一个事件处理函数使用你想要捕捉事件的元素的选择器,并为它们设置 this 。在代码中:

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

见过: http:// jsfiddle。 net / Gra2P / 2 /

I want to select the id of the current div when I click on it in jQuery.
For example, say I have HTML like this:

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

When I click on the first div on .item class, I want to copy the id of the current div + adding to it the number (10), so it will be ("div id" + 10) equal to the second dev class = item_10.

I tried to use currentid = this.id; but it doesnt work :( !

解决方案

First, note that id attributes starting with numbers are syntactically illegal in HTML4. If you're using id="10" make sure that you're using the HTML5 doctype (<!DOCTYPE html>).

It's hard to say why what you were doing didn't work without seeing your actual code. Presumably it is because you were registering for the event on a higher element (like the body) and this.id was the id of that higher element and not the element you clicked on.

In this case, you want to use the target property of the event to find what you clicked on. For example:

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

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

If you were registering on the specific elements instead, then this.id does work:

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

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

This is sub-ideal, however, because:

  1. It makes many event handler registrations instead of 1, and
  2. If additional divs are added to the document after this code is run, they will not be processed.

Under jQuery 1.7, you use the .on method to create a single event handler on a parent element with selectors for the kinds of elements you want to catch the event on, and have this set to them. In code:

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

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

这篇关于获取点击的div的ID的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆