Bootstrap 5 Popover：如何查找指定弹出框的索引

问题分析 #

你之前的代码无法定位目标Popover，核心原因是$(v._element).find('[aria-describedby="02-6423"]')是在查找触发按钮的子元素，但aria-describedby="02-6423"是直接写在触发按钮本身上的，所以找不到匹配项。

解决方案 #

方法一：通过aria-describedby属性直接定位触发元素 #

遍历popoverList时，直接校验每个Popover实例对应的触发元素（_element属性）的aria-describedby值，找到后调用hide()即可：

jQuery 写法

$.each(popoverList, function(i, popoverInstance) {
  const triggerBtn = popoverInstance._element;
  // 检查触发按钮自身的aria-describedby属性
  if ($(triggerBtn).attr('aria-describedby') === '02-6423') {
    popoverInstance.hide();
    // 找到目标后退出循环，提升效率
    return false;
  }
});

原生 JavaScript 写法

// 筛选出匹配的Popover实例
const targetPopover = popoverList.find(popover => {
  return popover._element.getAttribute('aria-describedby') === '02-6423';
});

// 找到后执行关闭操作
if (targetPopover) {
  targetPopover.hide();
}

方法二：添加自定义标识（更健壮） #

如果担心aria-describedby属性后续变动，建议给触发按钮添加自定义属性（比如data-popover-id="02-6423"），这样定位逻辑更稳定：

修改HTML触发按钮：

<button type="button" class="btn btn-xs btn-warning"
        data-bs-custom-class="popover-secondary"
        data-bs-toggle="popover"
        data-popover-id="02-6423" <!-- 新增自定义标识 -->
        data-bs-placement="top"
        data-bs-html="true"
        data-bs-content="<p><input type='text' class='form-control form-control-sm' value='0'></p><div class='d-flex justify-content-between'><button type='button' class='btn btn-sm btn-label-secondary popover-dismiss'>Cancel</button><button type='button' class='btn btn-sm btn-primary'>Save</button></div>"
        data-bs-original-title="Modify Item Price"
        aria-describedby="02-6423">
    <i class="bx bx-edit-alt"></i>Change
</button>

通过自定义属性定位并关闭：

const targetPopover = popoverList.find(popover => {
  return popover._element.getAttribute('data-popover-id') === '02-6423';
});

if (targetPopover) {
  targetPopover.hide();
}

关键说明 #

• Bootstrap 5的Popover实例通过_element属性关联对应的触发DOM元素，可通过该属性获取触发按钮的所有属性。
• 无需刻意查找索引x，直接定位到目标Popover实例后调用hide()即可，代码更简洁直观。

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