如何获取Bootstrap Popover的data-content并在控制台输出？

嘿，我看你之前的问题出在选对元素上——你选中的是.companyRoster这个容器div，但实际上Bootstrap Popover是绑定在img标签上的，那个div本身并没有data-content属性，所以之前的代码拿不到正确内容。

给你几个简单可行的方案：

方案1：直接从触发元素获取data-content（最直接） #

既然data-content是写在img标签上的，我们可以直接选中这个img，然后用jQuery的data()方法或者attr()方法获取内容：

// 选中带popover触发属性的img元素
const popoverImg = $('img[data-toggle="popover"]');
// 获取data-content的值
const content = popoverImg.data('content');
// 打印到控制台
console.log(content);

如果页面上有多个员工头像（多个popover触发元素），可以用循环遍历：

$('img[data-toggle="popover"]').each(function(index) {
  const content = $(this).data('content');
  console.log(`第${index+1}个Popover内容:`, content);
  // 这里可以把content存入数组，用于后续搜索：
  // popoverContents.push(content);
});

方案2：从已初始化的Popover实例中获取 #

如果你已经初始化了Popover实例，也可以从实例的配置项里拿到内容：

// 获取img上的Popover实例
const popoverInstance = $('img[data-toggle="popover"]').data('bs.popover');
// 从实例的options里取content
console.log(popoverInstance.options.content);

再补一句：你之前的代码没效果，核心原因是选错了绑定Popover的元素——.companyRoster容器并没有绑定Popover，Popover是初始化在里面的img标签上的，所以从容器的Popover实例调用getContent()自然拿不到东西~

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