Question

我有一个网页。假设我不知道该页面包含<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <p></p> <div></div> <div></div> </body> </html>或任何其他HTML标记。该脚本在后台运行，当我单击网页上的任意位置时，如果单击相应的HTML标记，那么该脚本将返回带有索引号的标记。

<p>

现在，当我单击标签p时，脚本应返回$("body").click(function(){ /* return the clicked html tag within body and its index*/ });及其索引。像这样：

$("tag name").click(function(){
     // return tag
 });

为此：

@Output

我需要知道我要单击哪个标签。但是我不知道我要点击哪个标签。

纯JS也可以。

Answer 1

p是您使用时随身携带的标签

$("body").click(function(){
/* return the clicked html tag within body and its index*/    
});

因此，如果您点击的所有孩子都会读到身体点击

如果您想单击p尝试

$('p').on('click',function(){});

不要使用

 $("body").click(function(){
    /* return the clicked html tag within body and its index*/    
    });

或者您可以尝试单击p

 $('body p').on('click',function(){});

Answer 2

事件上下文返回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>

Answer 3

没有jQuery，您可以像这样将var images = new List<ItemImage> { new ItemImage{Name = "1.jpg" }, new ItemImage{Name = "2.jpg" } }; var result = images.Select(x => $"http://www.example.com/{x.Name}"); // result[0] = "http://www.example.com/1.jpg" // result[1] = "http://www.example.com/2.jpg"处理程序附加到您的元素上：

onclick

这将显示页面上项目的索引。

Answer 4

只需在on方法中使用事件委托。 http://api.jquery.com/on/

如果提供选择器，则JQuery会将事件设置为仅在父级中的元素与该选择器匹配时才触发。在下面，它捕获任何元素，因为选择器为"*"-这具有附加的好处，即在函数调用中将当前单击的元素提供为this或e.currentTarget。

$("body").on("click", "*", function(e) { alert(this) });

要获取body中指定元素的索引，您可以使用该this上下文根据其tagName获取索引（ae段落具有tagName 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>

Answer 5

传递到事件侦听器的event对象包含在其target property上触发事件的元素。因此，如果您需要引用元素本身，则只需访问该属性即可：

var element = event.target;

如果需要元素名称，例如P，则访问元素对象的nodeName property：

var name = element.nodeName;

查找索引仅是遍历元素的父级children property并查看该元素位于哪个索引的问题。您可以通过将children属性转换为数组并调用indexOf()传入元素来轻松实现此目的

Array.from(element.parentElement.children).indexOf(element);

演示（请注意，P的索引为1，而div的索引为2，索引为3，因为<script>是第一个元素子级）

$(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>

单击网页时如何获取相应的HTML元素及其索引？

5 个答案: