使用第 n 个子选择器选择元素答案

【问题标题】：Selection of elements using nth-child selectors使用第 n 个子选择器选择元素
【发布时间】：2018-03-04 15:59:25
【问题描述】：

$(".sidebar&gt;i:nth-child(3)").on("click", showMenu);

<div class="sidebar">
  <i class="fa fa-volume-up"></i>
	<div class="colorPalette">
	  <button class="submit">Submit</button>
		<p>Color Pallette:</p><br />
		<div class="colors_1">
			<span id="color1"></span>
			<span id="color2"></span>
			<span id="color3"></span>
		</div>
		<div class="colors_2">
		  <span id="color4"></span>
			<span id="color5"></span>
			<span id="color6"></span>
		</div>	
	</div>
	<i class="fa fa-arrow-circle-o-left" title="Back to Menu"></i>
</div>

我需要选择第二个（返回菜单）按钮。那么为什么 nth-child(3) 有效，而 nth-child(2) 无效？

【问题讨论】：

答案很好，尽管开始使用这样的复杂选择器可能不是一个好主意。为了便于阅读，我会考虑使用.get()。 $('.sidebar > i').get(2).on('click', showMenu) 将获得第二个 i 元素
nth-of-type vs nth-child的可能重复
@kingdaro 非常感谢！

标签： javascript jquery css css-selectors

【解决方案1】：

因为:nth-child(n) 选择父元素内的所有子元素，无论它们是什么。所以，在你的情况下：

.sidebar>i:nth-child(3)
// This is the 3rd child, i tag

.sidebar>i:nth-child(2)
// This is the 2nd child, div tag

console.log($('.sidebar>i:nth-child(1)')[0])
console.log($('.sidebar>:nth-child(2)')[0])
console.log($('.sidebar>i:nth-child(2)')[0])
console.log($('.sidebar>i:nth-child(3)')[0])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
  <i class="fa fa-volume-up"></i>
  <div class="colorPalette">Test</div>
  <i class="fa fa-arrow" title="Back to Menu"></i>
</div>

你需要的其实是:nth-of-type()选择器。

console.log($('.sidebar>i:nth-of-type(1)')[0])
console.log($('.sidebar>i:nth-of-type(2)')[0])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
  <i class="fa fa-volume-up"></i>
  <div class="colorPalette">
    Test
  </div>
  <i class="fa fa-arrow" title="Back to Menu"></i>
</div>

【讨论】：

【解决方案2】：

来自JQuery's docs：

:nth-child(n) 伪类很容易与 :eq(n) 混淆，尽管两者会导致匹配的元素截然不同。使用 :nth-child(n) 计算所有子元素，无论它们是什么，并且仅当指定的元素与附加到伪类的选择器匹配时才会被选中。使用 :eq(n) 只计算附加到伪类的选择器，不限于任何其他元素的子元素，并且选择第 (n+1) 个（n 从 0 开始）。

【讨论】：