1

I want to record the source code line number for an HTML tag when I click on it. For example, if there are two tags, recording the tag alone will not help me differenciate between them.

Here is an example. Two "H1" tags:

enter image description here

When I click on the first, I want to know the source code line number:

enter image description here

If I could know that the second H1 was line number 74 (for example), I could know that the first and second H1 tags are not the same when recorded in the database.

Collarbone
  • 570
  • 7
  • 17
  • You can't exactly 'get' line number, you can get the source, count the number of newlines till the element that matches certain attributes but the 'line number' doesn't actually exist – Downgoat Apr 08 '15 at 22:38
  • I can't imagine why you'd want to do this, but I don't believe it's possible. You could try to infer line number by interrogating the DOM and counting line breaks, but that's clumsy and probably far from cross-browser. – Mitya Apr 08 '15 at 22:38
  • 3
    http://stackoverflow.com/questions/2044642/finding-out-what-line-number-an-element-in-the-dom-occurs-on-in-javascript – Downgoat Apr 08 '15 at 22:40
  • I'm looking for a clear way to differenciate elements on a page where only knowing the tags could produce similar results for a separate action. For example, in the above screenshot, there are two H1 tags (not necessarily hrefs) that if clicked on separately and the clicks were recorded in a database under the H1 tags alone, they would look like the same item clicked on when they were actually separate objects clicked on. I want a way to differentiate two similarly styled items on a webpage from each other. Alternative ideas? – Collarbone Apr 08 '15 at 22:50
  • You make a great point bringing up the conflict with cross-browser... browsers could render the code differently and therefore numbers may not line up. – Collarbone Apr 08 '15 at 22:53
  • quick question... what font is that? – Blake Apr 08 '15 at 23:09

2 Answers2

1

Best suggestion would be to get the index of the element. It's really not clear what your full intent is. If you need a complete selector to find the exact same element again that can also be done. 

$('h1').click(function(){
   alert($('h1').index(this);
});

A better description of your use case would help

For a much broader all tags approach:

$('*').click(function (e) {
    if (e.target === this) { // prevent all ancestors being registered
        var tag = e.target.tagName.toLowerCase();
        var data = {
            tag: tag,
            index: $(tag).index(this);
        };
        // sending tracking data to server
        $.post('path/to/server', data);
    }
});
charlietfl
  • 170,828
  • 13
  • 121
  • 150
0

Why don't you add unique id names to them and detect that instead??

Something like:

HTML:

<h1 class="title" id="titleA">I'm a product designer by trade</h1>

<p>Lorem Ipsum is dummy text so I'm typing random paragraph texts for a StackOverflow Answer. Lorem Ipsum is dummy text so I'm typing random paragraph texts for a StackOverflow Answer. Lorem Ipsum is dummy text so I'm typing random paragraph texts for a StackOverflow Answer. Lorem Ipsum is dummy text so I'm typing random paragraph texts for a StackOverflow Answer.</p>

<h1 class="title" id="titleB">I'm a viking warrior by trade</h1>

<p>Lorem Ipsum is dummy text so I'm typing random paragraph texts for a StackOverflow Answer. Lorem Ipsum is dummy text so I'm typing random paragraph texts for a StackOverflow Answer. Lorem Ipsum is dummy text so I'm typing random paragraph texts for a StackOverflow Answer. Lorem Ipsum is dummy text so I'm typing random paragraph texts for a StackOverflow Answer.</p>

JS:

$('#titleA').click(function(){
   alert("You clicked the first title Jamison!!");
});
$('#titleB').click(function(){
   alert("You clicked the second title Jamison!!");
});
AndrewL64
  • 15,794
  • 8
  • 47
  • 79
  • Great point but what I'm looking for is a way to not need to tag items. For this very reason am I looking for alternate solutions. Tagging takes time and planning. If we could track and group page events based on individual attributes of an object on a page rather than creating unique tags requiring added interaction with the code, execution of tracking could be more easily implemented (hypothetically). Make sense? – Collarbone Apr 08 '15 at 22:57