如何通过jQuery直接获取任意点击元素的根元素？附相关代码

嘿，我来帮你搞定这个需求！从你给出的代码结构来看，你要找的根元素应该是带data-id和data-ptype属性的.v7Cartlist容器对吧？jQuery有几个非常实用的方法可以轻松实现这个需求，我给你详细说说：

方法1：使用closest()（最推荐） #

closest()方法会从当前被点击的元素开始，向上遍历DOM树，找到第一个匹配指定选择器的祖先元素（如果当前元素本身就匹配，也会返回自己）。这是最高效的方式，因为找到目标后就会停止遍历。

代码示例 #

// 用事件委托监听.v7Cartlist下所有元素的点击事件
$(document).on('click', '.v7Cartlist *', function() {
    // 获取点击元素对应的根元素.v7Cartlist
    const rootElement = $(this).closest('.v7Cartlist');
    
    // 可以直接获取根元素的自定义属性，比如data-id
    console.log("根元素的data-id：", rootElement.data('id'));
    console.log("根元素的data-ptype：", rootElement.data('ptype'));
});

方法2：使用parents() + .first() #

parents()会返回所有匹配选择器的祖先元素，所以需要配合.first()来拿到最接近的那个根元素。不过这种方式效率略低于closest()，因为它会遍历所有符合条件的祖先再取第一个。

代码示例 #

$(document).on('click', '.v7Cartlist *', function() {
    const rootElement = $(this).parents('.v7Cartlist').first();
    // 后续操作和上面一致
});

额外提示 #

如果你的根元素（.v7Cartlist）本身也需要被点击触发，那可以把事件委托的选择器改成.v7Cartlist，这样不管点击根元素还是它的子元素，都能正确获取到根元素：

$(document).on('click', '.v7Cartlist', function() {
    const rootElement = $(this).closest('.v7Cartlist');
    // 或者直接用$(this)，因为点击的就是根元素本身
    // const rootElement = $(this);
});

内容的提问来源于stack exchange，提问作者Gyandeep Sharma