如何获取含ui-state-active类的h3标签中accord-后的唯一ID

你之前的代码问题出在find('class^="accord-"')——find()是用来查找目标元素的子元素的，但你要找的类是在h3自身的class属性里，所以这个写法完全错误。下面是正确的实现步骤：

步骤1：获取目标h3元素 #

先正确选中带有ui-state-active类的h3元素，你的基础选择器是对的，直接获取元素对象即可：

const activeH3 = $("div.accordion h3.ui-state-active");

步骤2：提取以accord-开头的类名中的ID #

拿到元素后，需要拆分它的所有类名，筛选出以accord-开头的项，再截取后面的ID部分：

// 拆分class属性为数组，筛选目标类
const accordClass = activeH3.attr('class').split(' ').find(cls => cls.startsWith('accord-'));
// 提取ID，如果找不到目标类则返回null
const id = accordClass ? accordClass.replace('accord-', '') : null;

也可以用更简洁的链式写法：

const id = $("div.accordion h3.ui-state-active")
  .attr('class')
  .split(' ')
  .filter(cls => cls.startsWith('accord-'))[0]
  ?.replace('accord-', '');

补充：处理多个符合条件的h3 #

如果页面中可能存在多个带ui-state-active类的h3，建议用.each()遍历处理，避免只获取第一个元素：

$("div.accordion h3.ui-state-active").each(function() {
  const accordClass = $(this).attr('class').split(' ').find(cls => cls.startsWith('accord-'));
  if (accordClass) {
    const id = accordClass.replace('accord-', '');
    // 这里添加ID的后续处理逻辑，比如打印或业务操作
    console.log(id);
  }
});

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