JS使用Array.prototype.indexOf.call获取节点索引时如何排除指定元素

你可以先将父节点的子元素转为真实数组，按照你的需求过滤掉不需要计数的元素后，再查找目标元素的索引即可。

适配需求的代码实现 #

var el = clickedElement;
var chl = el.closest('li');
var prt = chl.parentNode;
// 此处filter内写你的过滤规则，示例为仅保留li标签参与计数
var validChildren = Array.from(prt.children).filter(item => item.tagName === 'LI');
var idx = validChildren.indexOf(chl);

自定义过滤规则的示例 #

你可以根据自己的需求修改filter的判断逻辑，适配不同的排除场景：

• 排除指定标签（比如排除h2标签）：

  var validChildren = Array.from(prt.children).filter(item => item.tagName !== 'H2');
  

• 排除指定类名的元素（比如排除类名为ignore-count的元素）：

  var validChildren = Array.from(prt.children).filter(item => !item.classList.contains('ignore-count'));
  

• 排除符合任意CSS选择器的元素：

  var validChildren = Array.from(prt.children).filter(item => !item.matches('h2, .ignore, [data-skip]'));
  

按照你给出的结构示例，过滤后得到的数组仅包含3个li元素，li.second在数组中的索引就是你需要的2。如果目标元素本身被过滤规则排除，返回结果会是-1，你可以根据业务需要补充对应的异常判断逻辑。

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