摘要：元素选择器家庭关系功能通过"家庭关系"命名（如祖先、孩子、兄弟），提供直观的DOM元素层级选择能力，可快速定位目标元素的祖先、父级、子级、兄弟元素，无需手动遍历DOM树，大幅简化层级元素选择代码。
元素选择器家庭关系功能通过"家庭关系"命名（如祖先、孩子、兄弟），提供直观的DOM元素层级选择能力，可快速定位目标元素的祖先、父级、子级、兄弟元素，无需手动遍历DOM树，大幅简化层级元素选择代码。
该功能适用于需要根据元素层级关系定位元素的场景，如表单联动、菜单交互、动态DOM操作等，支持通过选择器筛选目标元素，提升选择精准度。
函数名参数返回值功能说明祖先(selector)selector（字符串，可选）：CSS选择器$cq对象：匹配的祖先元素向上查找当前元素的祖先元素（包括父级），若指定selector则返回第一个匹配的祖先，否则返回最近的祖先函数名
参数
返回值
功能说明
兄弟(selector)
selector（字符串，可选）：CSS选择器
$cq对象：匹配的兄弟元素集合
查找当前元素的所有兄弟元素（不包括自身），若指定selector则返回匹配的兄弟元素
下一个兄弟(selector)
$cq对象：匹配的下一个兄弟元素
查找当前元素的下一个直接兄弟元素，若指定selector则返回第一个匹配的下一个兄弟
兄弟们(selector)
$cq对象：匹配的后续兄弟元素集合
查找当前元素之后的所有兄弟元素，若指定selector则返回匹配的后续兄弟元素
兄弟亲密(selector, filter)
selector（字符串，必选）：结束条件选择器
filter（字符串，可选）：筛选选择器
函数名
参数
返回值
功能说明
大哥(selector)
selector（字符串，可选）：CSS选择器
$cq对象：匹配的上一个兄弟元素
查找当前元素的上一个直接兄弟元素，若指定selector则返回第一个匹配的上一个兄弟
大哥们(selector)
$cq对象：匹配的前置兄弟元素集合
查找当前元素之前的所有兄弟元素，若指定selector则返回匹配的前置兄弟元素
大哥亲密(selector, filter)
示例1：子级与祖先元素选择
编辑
选择第一个子元素 选择最后一个子元素 选择祖先元素
操作结果将显示在这里...
核心代码：
// 1. 选择父元素下的第一个子元素 const firstChild = $cq('#productList').孩子.第一个; console.log('第一个子元素ID:', firstChild.attr('data-id')); // 输出: "1" // 2. 选择父元素下的最后一个子元素 const lastChild = $cq('#productList').孩子.最后一个; console.log('最后一个子元素ID:', lastChild.attr('data-id')); // 输出: "4" // 3. 选择元素的祖先元素 const ancestor = $cq('#productList').祖先('#pageContainer'); console.log('找到的祖先元素ID:', ancestor.attr('id')); // 输出: "pageContainer"示例2：兄弟元素选择
编辑
选择下一个兄弟 选择所有后续兄弟 选择上一个大哥
操作结果将显示在这里...
核心代码：
// 1. 选择当前元素的下一个兄弟元素 const nextBrother = $cq('#currentMenu').下一个兄弟; console.log('下一个兄弟ID:', nextBrother.attr('data-id')); // 输出: "3" // 2. 选择当前元素的所有后续兄弟元素 const allNextBrothers = $cq('#currentMenu').兄弟们; console.log('后续兄弟数量:', allNextBrothers.length); // 输出: 3 // 3. 选择当前元素的上一个大哥元素 const prevBrother = $cq('#currentMenu').大哥; console.log('上一个大哥ID:', prevBrother.attr('data-id')); // 输出: "1"示例3：范围兄弟选择
编辑
操作结果将显示在这里...
核心代码：
// 1. 选择当前元素到指定元素之间的兄弟元素
const siblingsUntil = $cq('#currentItem').兄弟亲密('[data-id="15"]'); const ids1 = siblingsUntil.map(el => el.getAttribute('data-id')); console.log('范围内的兄弟ID:', ids1); // 输出: ["13", "14"] // 2. 选择当前元素到指定元素之间的前置兄弟元素 const prevSiblingsUntil = $cq('#currentItem').大哥亲密('[data-id="10"]'); const ids2 = prevSiblingsUntil.map(el => el.getAttribute('data-id')); console.log('范围内的大哥ID:', ids2); // 输出: ["11"]
让我们积极投身于技术共享的浪潮中，不仅仅是作为受益者，更要成为贡献者。无论是分享自己的代码、撰写技术博客，还是参与开源项目的维护和改进，每一个小小的举动都可能成为推动技术进步的巨大力量
Embrace open source and sharing, witness the miracle of technological progress, and enjoy the happy times of humanity! Let's actively join the wave of technology sharing. Not only as beneficiaries, but also as contributors. Whether sharing our own code, writing technical blogs, or participating in the maintenance and improvement of open source projects, every small action may become a huge force driving technological progrss.
来源：酸辣冰淇淋
