如何用jQuery选中与ParentID匹配data-id属性的h5标签

完整修正代码 #

// 获取下拉框选中的ParentID值
const parentId = $('#ddlSearch').val();

// 先隐藏所有类为to-list的h5元素
$('h5.to-list').hide();

// 定位data-id与ParentID匹配的h5元素
const targetH5 = $('h5.to-list[data-id="' + parentId + '"]');

// 显示匹配的元素
targetH5.show();

// 从匹配的h5开始遍历层级（示例操作，可根据需求调整）
// 获取该h5的直接子元素
const childElements = targetH5.children();
// 获取该h5的下一个兄弟元素
const nextSibling = targetH5.next();
// 获取该h5的父容器
const parentContainer = targetH5.parent();

关键修正说明 #

• 修复选择器语法错误：原代码大概率存在属性选择器引号未闭合的问题，正确的属性选择器格式为h5.to-list[data-id="值"]，必须用引号包裹属性值，否则会触发语法报错。
• 简化选中值获取：$('#ddlSearch').val()可以直接获取下拉框的选中值，和$('#ddlSearch option:selected').val()功能完全一致，写法更简洁。
• 修正显示/隐藏逻辑：先统一隐藏所有目标h5，再单独显示匹配项，避免出现部分元素未被正确隐藏的逻辑漏洞。
• 预留层级遍历入口：将匹配到的h5存入变量targetH5，后续可直接通过这个变量调用jQuery的各类遍历方法（如children()、next()、find()等）来操作层级结构。

边界情况处理（可选） #

如果需要处理ParentID为空或无匹配h5的场景，可以添加判断逻辑：

const parentId = $('#ddlSearch').val();
const allTargetH5 = $('h5.to-list');

allTargetH5.hide();

if (parentId && targetH5.length > 0) {
  targetH5.show();
  // 执行层级遍历逻辑
} else {
  // 无匹配时的处理，比如提示用户或保持全部隐藏
  console.log('未找到匹配的h5元素');
}

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