如何在jQuery中获取嵌套p元素相对于父div的索引（排除br标签）

你的需求是获取id为tea2的<p>元素在其父<div>中的索引，且计算时排除<br>标签，目标索引为1。原代码中$('#tea2').index()会把所有兄弟节点（包括<br>）计入统计，得到的结果是3，不符合要求，以下是两种可行的解决方法：

方法一：使用jQuery的带选择器参数的index()方法 #

jQuery的index(selector)方法会返回当前元素在匹配选择器的兄弟元素集合中的位置，直接帮我们过滤掉非目标标签：

let index = $('#tea2').index('p');
console.log(index); // 输出1

原理：该方法会在tea2的所有兄弟节点中，筛选出所有<p>元素，再返回tea2在这个筛选后集合中的索引，自动排除了<br>标签。

方法二：原生DOM手动过滤计算 #

如果不想依赖jQuery的特定方法，也可以用原生DOM API实现：

const targetEl = document.getElementById('tea2');
// 获取父元素的所有子节点，过滤掉br标签
const validSiblings = Array.from(targetEl.parentElement.children).filter(el => el.tagName !== 'BR');
// 计算目标元素在过滤后集合中的索引
const index = validSiblings.indexOf(targetEl);
console.log(index); // 输出1

原理：先获取目标元素的DOM对象，再拿到父元素的所有子节点，转成数组后过滤掉<br>标签，最后用indexOf找到目标元素的位置。

完整测试代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>
  <p>Milk</p>
  <br>
  <br>
  <p class="hot" id="tea">Tea</p>
  <p class="hot" id="favorite">Coffee</p>
</div>
<div>
  <p>Milk</p>
  <br>
  <br>
  <p class="hot" id="tea2">Tea</p>
  <p class="hot" id="favorite2">Coffee</p>
</div>
<script>
// 方法一测试
let index1 = $('#tea2').index('p');
console.log('方法一结果：', index1);

// 方法二测试
const targetEl = document.getElementById('tea2');
const validSiblings = Array.from(targetEl.parentElement.children).filter(el => el.tagName !== 'BR');
const index2 = validSiblings.indexOf(targetEl);
console.log('方法二结果：', index2);
</script>

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