获取点击的< a>的DOM路径 [英] Get the DOM path of the clicked <a>
问题描述
HTML
< body&
< div class =lol>
< a class =rightArrowhref =javascriptVoid：（0）;标题下一图像>
< / div>
< / body>
伪代码
$（。rightArrow）。click（function（）{
rightArrowParents = this.dom（）; // dom（）;是伪函数...它应该显示整个
alert（rightArrowParents）;
}）
警报讯息将是：
strong> body div.lol a.rightArrow
如何使用javascript / jquery获取这个？
$（。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;
}）;
生活示例：
$ b b
$（。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 =rightArrowtitle =下一张图片>点击此处< / a>< / div>< script src =https://ajax.googleapis.com/ajax/ libs / jquery / 1.11.1 / jquery.min.js>< / script>
（在实例中，我更新了 div 上的 class lol multi 以演示处理多个类。）
使用 parents 以获取单击的元素的祖先，删除 html 元素，通过 不 （因为你从 body 开始），然后循环遍历为每个父项创建条目并将它们推送到数组。然后，我们使用 addBack 添加 a 回到集合，这也将集合的顺序改变到你想要的（ parents 是特殊的，它给你父母的顺序与你想要的顺序相反，但是 addBAck 会将它放回DOM顺序）。然后，它使用 Array＃join 创建以空格分隔的字符串。
创建条目时， on className 我们用。替换空格以支持具有多个类的元素（ ; p class ='foo bar'> 有 className = foo bar ，所以条目结束 p.foo.bar ）。
仅仅为了完整性，那些jQuery可能是过度的地方，你可以轻松地通过走走DOM：
$（rightArrow ）.click（function（）{
var rightArrowParents = []，
elm，
entry;
for（elm = this; elm; elm = elm。 parentNode）{
entry = elm.tagName.toLowerCase（）;
if（entry ===html）{
break;
}
if .className）{
entry + =。+ elm.className.replace（/ / g，'。'）;
}
rightArrowParents.push（entry）;
}
rightArrowParents.reverse（）;
alert（rightArrowParents.join（））;
return false;
}）;
生活示例：
$ b b
$（。rightArrow）。click（function（）{var rightArrowParents = [] ，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 =rightArrowtitle =下一张图片>点击此处< / a>< / div>< 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屋！
