在Javascript中显示onClick上的html标记的源代码行号

Question

我想在点击它时记录HTML标记的源代码行号。例如，如果有两个标签，单独录制标签将无法帮助我区分它们。

这是一个例子。两个＆＃34; H1＆＃34;标记：

当我点击第一个时，我想知道源代码行号：

如果我知道第二个H1是第74行（例如），我可以知道第一个和第二个H1标签在数据库中记录时不一样。

Answer 1

最好的建议是获取元素的索引。目前还不清楚你的全部意图是什么。如果您需要一个完整的选择器来再次找到完全相同的元素，那么也可以这样做。

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

更好地描述您的用例会有所帮助

更广泛的all tags方法：

$('*').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);
    }
});

Answer 2

为什么不向它们添加唯一的ID名称并检测到它？

类似的东西：

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!!");
});