查看特定元素对应的第 n 个子元素？答案

【问题标题】：seeing what nth child a particular element corresponds to?查看特定元素对应的第 n 个子元素？
【发布时间】：2020-08-22 18:15:02
【问题描述】：

使用https://api.jquery.com/eq/ 的示例，假设我有以下 HTML：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

如果你想选择第二个<li>，你可以选择$("li").eq( 2 )。

但是如果我有一个随机的<li> 并想看看它是不是第一个呢？例如。假设我做了var el = $("li").eq(Math.floor(Math.random() * 5) + 1)，然后想看看el 是不是第一个<li>。我该怎么做？

【问题讨论】：

$("li").eq( 2 ) 是第三个而不是第二个，因为索引是从零开始的
[...el.parentElement.children].indexOf(el)
原生 DOM API：el.previousElementSibling == null
或：el.matches(":first-child")

标签： javascript html jquery dom

【解决方案1】：

您可以检查元素.matches是否是您感兴趣的第n个子选择器。例如：

const li = $('li').eq(2)[0]; // .eq is 0-indexed
console.log(
  li.matches(':nth-child(2)'), // false - it's the 3rd (1-indexed), not the 2nd
  li.matches(':nth-child(3)') // true
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

我更喜欢使用普通的 DOM 元素，但如果您必须使用 jQuery 方法来查看元素是否匹配选择器，请使用 .is:

const $li = $('li').eq(2); // .eq is 0-indexed
console.log(
  $li.is(':nth-child(2)'), // false - it's the 3rd (1-indexed), not the 2nd
  $li.is(':nth-child(3)') // true
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

不需要 jQuery，没有它这很简单：

const li = document.querySelectorAll('li')[2]; // 0-indexed collection
console.log(
  li.matches(':nth-child(2)'), // false - it's the 3rd (1-indexed), not the 2nd
  li.matches(':nth-child(3)') // true
);

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

【讨论】：

【解决方案2】：

一种方法是使用index() 在其兄弟姐妹中获取元素索引。

您也可以使用is() 并传入代表特定元素的选择器或jQuery 对象

const $li = $('li')

 $li.eq(Math.floor(Math.random()*5)).css('color','red').click(function(){
   const index = $(this).index();
   console.log('My index is ',index , 'is first = ', index ===0);
   console.log('I am first', $(this).is($li.first()))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

【讨论】：