如何检查指定div内是否存在带有特定属性及对应值的子元素

实现方案 #

原生JavaScript实现 #

直接用属性选择器匹配即可，性能最优：

// 方式1：已知父容器id为MyContainer时直接查询
const hasTargetElement = document.querySelector('#MyContainer [data-level="3"]') !== null;

// 方式2：仅通过data-level属性匹配父容器时使用
const parentContainer = document.querySelector('div[data-level="1"]');
const hasTargetElement = parentContainer ? parentContainer.querySelector('[data-level="3"]') !== null : false;

返回的hasTargetElement为true表示存在目标元素，为false则不存在。

jQuery实现 #

如果项目中引入了jQuery，可以用更简短的写法：

const hasTargetElement = $('div[data-level="1"]').find('[data-level="3"]').length > 0;

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