获取被点击的<a>的DOM路径 [英] Get the DOM path of the clicked <a>
问题描述
HTML
<div class="lol"><a class="rightArrow" href="javascriptVoid:(0);"标题下一张图片">伪代码
$(".rightArrow").click(function() {rightArrowParents = this.dom();//.dom();是伪函数......它应该显示整体警报(rightArrowParents)；});警报消息将是:
body div.lol a.rightArrow
我怎样才能用 javascript/jquery 得到这个?
使用 jQuery，就像这样(后面是一个除了事件之外不使用 jQuery 的解决方案；如果这很重要，函数调用会少很多):
$(".rightArrow").click(function() {var rightArrowParents = [];$(this).parents().addBack().not('html').each(function() {var entry = this.tagName.toLowerCase();如果(this.className){条目 += "."+ this.className.replace(//g, '.');}rightArrowParents.push(entry);});警报(rightArrowParents.join("))；返回假；});实例:
$(".rightArrow").click(function() {var rightArrowParents = [];$(this).parents().addBack().not('html').each(function() {var entry = this.tagName.toLowerCase();如果(this.className){条目 += "."+ this.className.replace(//g, '.');}rightArrowParents.push(entry);});警报(rightArrowParents.join("))；返回假；});<a href="#" class="rightArrow" title="下一张图片">点击这里</a><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
(在实时示例中，我已将 div 上的 class 属性更新为 lol multi 以演示处理多个类.)
使用 parents 来获取元素的祖先单击，通过 nothtml 元素a>(因为您从 body 开始)，然后循环为每个父项创建条目并将它们推送到数组上.然后我们使用 addBack 将 a 添加回来到集合中，这也将集合的顺序更改为您想要的顺序(parents 是特殊的，它以与您想要的顺序相反的顺序为您提供父母，但随后 addBck 将其放回 DOM 顺序).然后它使用 Array#join 创建以空格分隔的字符串.
在创建条目时，如果 className 上有任何内容，我们将用 . 替换空格以支持具有多个类的元素(<p class='foo bar'> 有 className = "foo bar"，所以条目最终是 p.foo.bar).
为了完整起见，这是 jQuery 可能过度使用的地方之一，您只需走 DOM 就可以轻松做到这一点:
$(".rightArrow").click(function() {var rightArrowParents = [],榆树，入口;for (elm = this; elm; elm = elm.parentNode) {条目 = elm.tagName.toLowerCase();如果(条目 ===html"){休息;}如果(榆树.className){条目 += "."+ elm.className.replace(//g, '.');}rightArrowParents.push(entry);}rightArrowParents.reverse();警报(rightArrowParents.join("))；返回假；});实例:
$(".rightArrow").click(function() {var rightArrowParents = [],榆树，入口;for (elm = this; elm; elm = elm.parentNode) {条目 = elm.tagName.toLowerCase();如果(条目 ===html"){休息;}如果(榆树.className){条目 += "."+ elm.className.replace(//g, '.');}rightArrowParents.push(entry);}rightArrowParents.reverse();警报(rightArrowParents.join("))；返回假；});<a href="#" class="rightArrow" title="下一张图片">点击这里</a><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
我们只使用标准的parentNode 属性 重复向上遍历树，直到我们用完父元素或看到 html 元素.然后我们反转我们的数组(因为它向后返回到您想要的输出)，并加入它，我们就可以开始了.
HTML
<body>
<div class="lol">
<a class="rightArrow" href="javascriptVoid:(0);" title"Next image">
</div>
</body>
Pseudo Code
$(".rightArrow").click(function() {
rightArrowParents = this.dom(); //.dom(); is the pseudo function ... it should show the whole
alert(rightArrowParents);
});
Alert message would be:
body div.lol a.rightArrow
How can I get this with javascript/jquery?
Using jQuery, like this (followed by a solution that doesn't use jQuery except for the event; lots fewer function calls, if that's important):
$(".rightArrow").click(function() {
var rightArrowParents = [];
$(this).parents().addBack().not('html').each(function() {
var entry = this.tagName.toLowerCase();
if (this.className) {
entry += "." + this.className.replace(/ /g, '.');
}
rightArrowParents.push(entry);
});
alert(rightArrowParents.join(" "));
return false;
});
Live example:
$(".rightArrow").click(function() {
var rightArrowParents = [];
$(this).parents().addBack().not('html').each(function() {
var entry = this.tagName.toLowerCase();
if (this.className) {
entry += "." + this.className.replace(/ /g, '.');
}
rightArrowParents.push(entry);
});
alert(rightArrowParents.join(" "));
return false;
});
<div class="lol multi">
<a href="#" class="rightArrow" title="Next image">Click here</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
(In the live examples, I've updated the class attribute on the div to be lol multi to demonstrate handling multiple classes.)
That uses parents to get the ancestors of the element that was clicked, removes the html element from that via not (since you started at body), then loops through creating entries for each parent and pushing them on an array. Then we use addBack to add the a back into the set, which also changes the order of the set to what you wanted (parents is special, it gives you the parents in the reverse of the order you wanted, but then addBAck puts it back in DOM order). Then it uses Array#join to create the space-delimited string.
When creating the entry, if there's anything on className we replace spaces with . to support elements that have more than one class (<p class='foo bar'> has className = "foo bar", so that entry ends up being p.foo.bar).
Just for completeness, this is one of those places where jQuery may be overkill, you can readily do this just by walking up the DOM:
$(".rightArrow").click(function() {
var rightArrowParents = [],
elm,
entry;
for (elm = this; elm; elm = elm.parentNode) {
entry = elm.tagName.toLowerCase();
if (entry === "html") {
break;
}
if (elm.className) {
entry += "." + elm.className.replace(/ /g, '.');
}
rightArrowParents.push(entry);
}
rightArrowParents.reverse();
alert(rightArrowParents.join(" "));
return false;
});
Live example:
$(".rightArrow").click(function() {
var rightArrowParents = [],
elm,
entry;
for (elm = this; elm; elm = elm.parentNode) {
entry = elm.tagName.toLowerCase();
if (entry === "html") {
break;
}
if (elm.className) {
entry += "." + elm.className.replace(/ /g, '.');
}
rightArrowParents.push(entry);
}
rightArrowParents.reverse();
alert(rightArrowParents.join(" "));
return false;
});
<div class="lol multi">
<a href="#" class="rightArrow" title="Next image">Click here</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
There we just use the standard parentNode property of the element repeatedly to walk up the tree until either we run out of parents or we see the html element. Then we reverse our array (since it's backward to the output you wanted), and join it, and we're good to go.
这篇关于获取被点击的<a>的DOM路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
