js实现jqueryindex
实现 jQuery 的 index() 方法
在原生 JavaScript 中，可以通过遍历 DOM 元素来模拟 jQuery 的 index() 方法。index() 方法用于获取当前元素在其父元素的子元素集合中的位置索引。
方法一：使用 Array.prototype.indexOf
function index(element) {
if (!element || !element.parentNode) {
return -1;
}
return Array.from(element.parentNode.children).indexOf(element);
}
// 示例用法
const el = document.querySelector('.target');
console.log(index(el)); // 输出元素在父元素中的索引方法二：直接遍历兄弟节点
function index(element) {
if (!element || !element.parentNode) {
return -1;
}
const children = element.parentNode.children;
for (let i = 0; i < children.length; i++) {
if (children[i] === element) {
return i;
}
}
return -1;
}
// 示例用法
const el = document.querySelector('.target');
console.log(index(el)); // 输出元素在父元素中的索引方法三：支持选择器过滤（类似 jQuery 的 index(selector)）
function index(element, selector) {
if (!element || !element.parentNode) {
return -1;
}
const siblings = selector
? Array.from(element.parentNode.querySelectorAll(selector))
: Array.from(element.parentNode.children);
return siblings.indexOf(element);
}
// 示例用法
const el = document.querySelector('.target');
console.log(index(el, '.child')); // 输出元素在符合选择器的兄弟元素中的索引注意事项
- 如果元素没有父节点或传入的不是 DOM 元素，函数会返回
-1。 - jQuery 的
index()方法还支持传入选择器或元素作为参数，上述方法三模拟了这种功能。 - 原生实现与 jQuery 的行为可能略有差异，需根据实际需求调整。
