jQuery技术问询：无类选择器定位元素及查找子元素达标最近父元素

HTML示例 #

<div class="test">
    <div class="findMe">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

<div class="test">
    <div></div>
    <div>
        <div>
            <div class="findMe">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
</div>

<div class="test">
    <div>
        <div>
            <div>
                <div class="findMe">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div>
                <div class="notMe">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
    <div></div>
</div>

需求说明 #

1. 从每个.test节点树中获取div.findMe元素，禁止使用：.findMe、[class]等类相关选择器
2. 实现查找拥有超过1个子元素的最近父元素，要求支持任意嵌套层级、可自定义子元素数量阈值

解决方案 #

一、获取目标元素（不使用类选择器） #

根据HTML结构，div.findMe的共同特征是直接包含3个div子元素，基于此可以通过CSS选择器或JavaScript实现：

1. CSS选择器方案

.test div:has(> div:nth-child(3)):not(:has(> div:nth-child(4)))

• 逻辑：筛选.test下的div，要求该div有至少3个直接div子元素，且没有第4个直接子元素（即刚好3个），匹配所有findMe元素

2. JavaScript方案

const testElements = document.querySelectorAll('.test');
const targetElements = [];

testElements.forEach(test => {
  const traverse = (el) => {
    for (const child of el.children) {
      if (child.tagName !== 'DIV') continue;
      const divChildren = Array.from(child.children).filter(c => c.tagName === 'DIV');
      if (divChildren.length === 3) {
        targetElements.push(child);
        return; // 每个.test仅取第一个符合条件的元素，若需全部匹配可移除return
      }
      traverse(child);
    }
  };
  traverse(test);
});

// 输出结果
console.log(targetElements);

二、查找符合子元素数量要求的最近父元素 #

可以通过JavaScript实现通用函数，支持自定义阈值和任意嵌套层级：

function findClosestParentWithChildCount(element, minCount = 2) {
  let current = element.parentElement;
  while (current) {
    // 统计父元素的直接子元素数量（若需仅统计div，可修改此处过滤逻辑）
    const childCount = current.children.length;
    if (childCount >= minCount) {
      return current;
    }
    current = current.parentElement;
  }
  return null; // 未找到符合条件的父元素时返回null
}

// 使用示例
const sampleElement = document.querySelector('.test:first-child div');
// 查找最近的、至少有2个子元素的父元素
const closestParent = findClosestParentWithChildCount(sampleElement, 2);
console.log(closestParent);

• 逻辑：从目标元素的父节点开始向上遍历，逐个检查父元素的直接子元素数量是否达到设定的阈值，找到第一个符合条件的父元素即返回
• 若需仅统计特定类型的子元素（如仅div），可修改childCount的计算方式：

  const childCount = Array.from(current.children).filter(c => c.tagName === 'DIV').length;
  

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