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.

Your question doesn't seem very specific. We might be able to help if you tell us what problem you are trying to solve! — Namaskar, Oct 02 '18 at 19:18
@SvenWritesCode edited my post. Tell me if you don't understand — user9422949, Oct 02 '18 at 19:26
Note: if you wish to mention HTML tags like `
` in a paragraph, wrap them in backticks. This question made little sense prior to my edit, because these tags were rendered as HTML, not text. I recommend using the preview window when composing a post here - it means you can check what your post will look like even before it has been submitted. — halfer, Oct 03 '18 at 09:52
Possible duplicate of [JavaScript DOM: Find Element Index In Container](https://stackoverflow.com/questions/11761881/javascript-dom-find-element-index-in-container) — Heretic Monkey, Oct 03 '18 at 12:36

score 0 · Answer 1 · answered Oct 02 '18 at 19:16

0

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(){});

answered Oct 02 '18 at 19:16

yuanganteng

171
9

The use of `$("body").click()` is used as a [delegated event handler](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation). That way you don't have to write multiple event handlers for every single element. And OP wants to be able to have the event triggered for any of the elements clicked – Patrick Evans Oct 02 '18 at 19:28

score 0 · Answer 2 · answered Oct 02 '18 at 19:22

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>

score 0 · Answer 3 · answered Oct 02 '18 at 19:29

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.

score 0 · Accepted Answer · answered Oct 02 '18 at 19:34

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 (a.e. 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>

suppose the "p" tag is inside a "div" tag, so when i click on it , it returns all the tags including the div tag which is very obvious, but if i want to get only first tag i.e the tag i clicked then what do i have to do? — user9422949, Oct 04 '18 at 11:29

score -1 · Answer 5 · answered Oct 02 '18 at 19:42

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>

Thank you very much your for the explanation. now it's clear to me. — user9422949, Oct 02 '18 at 19:44

How to get the respective HTML element and its index when clicked on a web page?

5 Answers5