如何用jQuery快速定位具有相同data-id的近亲属元素

嘿，这个问题挺实用的，刚好我之前处理过类似的Bootstrap卡片场景，给你分享下最优的实现思路～

核心实现步骤 #

其实核心逻辑很清晰：先拿到$(this)近亲属的data-id值，再精准定位拥有相同data-id的目标元素，关键是要缩小查找范围来提升性能，避免全局遍历DOM。

举个贴合你场景的例子 #

假设你的Bootstrap卡片结构大概是这样（带导航标题的卡片）：

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item" data-id="content-1">
        <a class="nav-link active" href="#">标题1</a>
      </li>
      <li class="nav-item" data-id="content-2">
        <a class="nav-link" href="#">标题2</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <div class="content-item active" data-id="content-1">对应标题1的内容</div>
    <div class="content-item" data-id="content-2">对应标题2的内容</div>
  </div>
</div>

对应的jQuery代码可以这么写：

// 假设点击的是导航链接，$(this)就是当前点击的.nav-link
$(document).on('click', '.nav-link', function() {
  // 1. 找到当前元素最近的带data-id的近亲属（这里是.nav-item）
  const targetId = $(this).closest('.nav-item').data('id');
  
  // 2. 限定在当前卡片内查找匹配data-id的目标元素，避免全局查找
  const matchedElement = $(this).closest('.card').find(`[data-id="${targetId}"]`);
  
  // 3. 接下来就可以对目标元素做操作了，比如切换激活状态
  matchedElement.addClass('active').siblings().removeClass('active');
});

为什么这是最优方案？ #

• 高效查找近亲属：用.closest()代替.parent()或.parents()，它会从当前元素向上遍历DOM，找到第一个匹配的元素就停止，比遍历所有父级元素快得多。
• 缩小查找范围：通过.closest('.card')限定只在当前卡片内查找目标元素，而不是全局用$('[data-id="..."]')，页面元素越多，性能提升越明显，还能避免意外匹配其他卡片里的元素。
• 灵活的data属性处理：.data()方法会自动解析data-id的类型（比如数字、布尔值），比.attr('data-id')返回字符串更灵活。

特殊情况处理 #

如果你的data-id值可能包含引号、空格这类特殊字符，用属性选择器可能会出语法问题，这时候推荐用.filter()来匹配：

const matchedElement = $(this).closest('.card').find('.content-item').filter(function() {
  return $(this).data('id') === targetId;
});

这种方式完全不受特殊字符影响，安全性更高。

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