如何获取同class父容器内id前缀为RequestNewOrgBtn的按钮局部索引

问题描述 #

我有如下HTML结构：

<div>    
    <div class="flw__panel__col--12 flw__container__col--12 formSection__col--12">
      <div>
         <div><div class="EmptyDiv"></div><button onClick={onAddClick} id="RequestNewOrgBtn_prefix-1" class="ui primary button">Request New External Org</button><div></div></div>
      </div>

      <div>
        <div><div class="EmptyDiv"></div><button onClick={onAddClick} id="RequestNewOrgBtn_prefix-2" class="ui primary button">Request New External Org</button><div></div></div>
      </div>
    </div>

    <div class="flw__panel__col--12 flw__container__col--12 formSection__col--12">
    <div>
        <div><div class="EmptyDiv"></div><button onClick={onAddClick} id="RequestNewOrgBtn_prefix-3" class="ui primary button">Request New External Org</button><div></div></div>
    </div>

    <div>
        <div><div class="EmptyDiv"></div><button onClick={onAddClick} id="RequestNewOrgBtn_prefix-4" class="ui primary button">Request New External Org</button><div></div></div>
    </div>
    </div>
</div>

点击按钮时，当前代码能获取所有id以RequestNewOrgBtn开头的元素的全局索引，但我需要获取该元素在其所属的flw__panel__col--12 flw__container__col--12 formSection__col--12类容器内的局部索引，这个类不是唯一的，有多个容器共用，不知道怎么通过父div实现这个需求。当前代码如下：

const onAddClick = (e: any) => {
        // find index of selected elememt
        let cusid_ele = document.querySelectorAll("[id^=RequestNewOrgBtn]");
        const selectedElementId = e.target.id;
        for (let i = 0; i < cusid_ele.length; i++){
            if( cusid_ele[i].getAttribute("id") === selectedElementId){
                setSelectedIndex(i);
            }
        }
    };

解决方案 #

要实现局部索引的获取，核心思路是先定位当前按钮所属的目标容器，再在该容器内查询按钮并计算索引。修改后的代码如下：

const onAddClick = (e) => {
  // 获取当前点击的按钮元素
  const clickedBtn = e.target;
  // 向上查找最近的目标容器（多类选择器需连写，无空格）
  const parentContainer = clickedBtn.closest('.flw__panel__col--12.flw__container__col--12.formSection__col--12');
  // 找不到容器则直接返回
  if (!parentContainer) return;
  
  // 在当前容器内查询所有符合条件的按钮
  const containerBtns = parentContainer.querySelectorAll('[id^=RequestNewOrgBtn]');
  // 遍历找到当前按钮的局部索引
  for (let i = 0; i < containerBtns.length; i++) {
    if (containerBtns[i].id === clickedBtn.id) {
      setSelectedIndex(i);
      break; // 找到索引后立即终止循环，提升效率
    }
  }
};

关键说明 #

• 使用closest()方法精准定位当前按钮所属的容器，该方法会从当前元素开始向上遍历DOM树，返回第一个匹配选择器的祖先元素
• 仅在目标容器内查询按钮，避免全局扫描，既保证了索引的局部性，也提升了代码性能
• 找到匹配的按钮后立即跳出循环，无需遍历剩余元素

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