How to get the respective HTML element and its index when clicked on a web page?
Question
I have a webpage. Suppose I don't know that the page contains a <p> or any other HTML tag. The script runs in the background and when I click anywhere on the webpage if there is a corresponding HTML tag to the click then the script returns the tag with its index number.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p></p>
<div></div>
<div></div>
</body>
</html>
Now when I click on the tag p then the script should return <p> and its index. Somewhat like this:
$("body").click(function(){
/* return the clicked html tag within body and its index*/
});
For this:
$("tag name").click(function(){
// return tag
});
I need to know which tag I am clicking on. But I don't know on which tag I'm going to click.
Pure JS will also do.
5 answers
solution1
0 2018-10-02 19:16:01
p is tag contained with body if u use
$("body").click(function(){
/* return the clicked html tag within body and its index*/
});
so all of child if you clicks will read body click
if u want click p try it
$('p').on('click',function(){});
and dont use
$("body").click(function(){
/* return the clicked html tag within body and its index*/
});
or u can try it for click p
$('body p').on('click',function(){});
solution2
0 2018-10-02 19:22:17
The event context returns the html
$('body').click(function(){ var clicked = $(event.target).context; return clicked;})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <body> <p> Nice Body</p> <p> No pun intended </p> </body>
solution3
0 2018-10-02 19:29:56
Without jQuery you can attach an onclick handler to your elements like so:
for (let i = 0, len = document.body.children.length; i < len; i++) {
document.body.children[i].onclick = function(){
alert(i) ;
}
}
This will show you the index of the item on the page.
solution4
0 ACCPTED 2018-10-02 19:34:54
Just use event delegation within the on method. http://api.jquery.com/on/
If you provide a selector JQuery will setup the event to fire only when an element within the parent matches that selector. In the below it grabs any element because the selector is "*" - this has the added benefit of providing the current clicked element as this or e.currentTarget within the function call.
$("body").on("click", "*", function(e) { alert(this) });
To get the index of the specified element within the body you can use that this context to grab the index based on its tagName (ae paragraphs have a tagName of p )
$("body").on("click", "*", function(e) { alert(this + " " + $(this).index(this.tagName))}
$("body").on("click", "*", function(e) { alert(this + " " + $(this).index(this.tagName)) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <p>paragraph</p> <div>div</div> <div>div</div> </body> </html>
solution5
-1 2018-10-02 19:42:27
The event object that is passed to the event listener contains the element that triggered the event on its target property . So if you need a reference to the element itself just access that property:
var element = event.target;
If you need the name of the element, for instance P , then access the nodeName property of the element object:
var name = element.nodeName;
Finding the index is just a matter of going through the element's parent's children property and seeing which index that element is at. You can do this easily by turning the children property into an Array and calling indexOf() passing in the element
Array.from(element.parentElement.children).indexOf(element);
Demo (note the index is 1 for the P and 2 and 3 for the div's as <script> is the first element child)
$(document.body).click(function(event) { var element = event.target; var elementName = element.nodeName; var index = Array.from(element.parentElement.children).indexOf(element); console.log("Element: ", elementName); console.log("Index: ", index); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>paragraph</p> <div>div 1</div> <div>div 2</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.