我有一个看起来像的 HTML 标记
<ul>
...
<li>
<ul class="x">
...
<a href="#"...
如何ul.x
从链接上的点击事件中获取父元素?
this.parentNode
如果 UL 是父元素,则有效,但如果它是我必须使用的祖先之一,则this.parentNode.parentNode
取决于两者之间有多少父元素......
我能以某种方式获得第一个 UL 父母吗?
我有一个看起来像的 HTML 标记
<ul>
...
<li>
<ul class="x">
...
<a href="#"...
如何ul.x
从链接上的点击事件中获取父元素?
this.parentNode
如果 UL 是父元素,则有效,但如果它是我必须使用的祖先之一,则this.parentNode.parentNode
取决于两者之间有多少父元素......
我能以某种方式获得第一个 UL 父母吗?
由于您已将问题标记为 jQuery:
$(this).closest("ul"); //Get the first ancestor `ul`
$(this).closest("ul.x"); //Get the first ancestor `ul` with class `x`
或者,没有 jQuery(因为您的示例似乎没有使用 jQuery):
var node = this;
while(node.tagName !== "UL") {
node = node.parentNode;
}
使用closest()
. 这将获得与您提供的选择器匹配的最近祖先。
$(function(){
$('a').on('click',function(){ //handler of your <a>
var ulx = $(this).closest('ul.x'); //find the closest ancestor <ul> with class "x"
});
});
如果ul.x
是a
使用这个的直接父母:
$('a').on('click',function(){
var ul = $(this).parent('ul.x');
});
或者
$('a').on('click',function(){
var ul = $(this).closest('ul.x');
});
通常你会.closest()
像这样使用:
$('a').click(function(){
var ul = $(this).closest('ul.x'); //or just closest('ul') in case you only used the x for demo purposes
});
这将向上 DOM 树并在第一个匹配项(您的ul.x
-element)处停止。
为了表现,
您也可以在下面使用 jquery,jquery eventObject也有一个名为delegateTarget的属性,这在您的情况下可能很有用。
$('ul.x').on('click', 'a', function(e){
//e.delegateTarget is the parent ul of the clicked a tag
//e.target.id is the clicked a tag
alert(e.delegateTarget.id);
alert(e.target.id);
});
HTML:
<ul id='a' class="x">
<li><a id='1' href="#">A</a></li>
<li><a id='2' href="#">B</a></li>
<li><a id='3' href="#">C</a></li>
</ul>
<ul id='b' class="x">
<li><a id='11' href="#">1</a></li>
<li><a id='21' href="#">2</a></li>
<li><a id='31' href="#">3</a></li>
</ul>
在性能方面,您没有将事件绑定到所有a
标签上。jQuery 建议采用这种方式。
这是小提琴。