高效的 jQuery DOM 遍历答案

【问题标题】：Efficient jQuery DOM traversal高效的 jQuery DOM 遍历
【发布时间】：2015-04-08 04:28:15
【问题描述】：

考虑以下 HTML：

<div class="group">
    <div class="select">Project Type</div>
    <div class="option">
        <div>Personal Website</div>
        <div>Business Website</div>
        <div>Hosting</div>
        <div>Social Media</div>
        <div>Online Storefront</div>
        <div>Graphics & Branding</div>
    </div>
</div>

这是我的工作 jQuery：

var item = $('.option').find('div');

item.on('click', function(event){
    var test = $(this).parent().prev('.select');

    console.log( test );
});

这可行，但我的问题是我认为这不是很灵活，因为如果我以任何方式重新排列代码，它很容易中断，因为 .select 必须与 .option 相邻且位于 .option 或它坏了。

有没有人有什么好的解决方案可以帮助我更动态地遍历 DOM 树，从而不依赖于 HTML 元素的确切顺序？

【问题讨论】：

你应该改用：$(this).closest('.group').find('.select') 更灵活的api.jquery.com/closest
顺便说一下，item.on('click', function(event){...}) 使独立绑定到 <div> 内的每个子级 <div> <div class="option">。为什么不使用$('.option').on('click', function(event){...})？在事件处理程序内部，您可以使用event.target 来获取被点击的子<div> 元素。事件处理程序内部的 $(this).prevAll('.select') 或 $(this).closest('.group').find('.select') 将获取您的 div.select 元素。

标签： jquery html dom traversal

【解决方案1】：

$(".group").on('click', '.option div', function(event) {
    // event.delegateTarget is always .group element
    var test = $(event.delegateTarget).find('.select');
    console.log(test);
    console.log('Clicked option:', this);
});

详细了解delegated on() 和delegateTarget。

【讨论】：