jQuery :nth-child(n)选择器

:nth-child(n)选择器语法

$('selector:nth-child(n)')

:nth-child(n)选择器语法解析

这个jQuery选择器选择的是selector选择器选择的元素的父元素中第n个子元素为该元素的所有元素,如果不是该元素,则不会被匹配选择,即匹配选择的不是单单的第n个子元素。具体的可参考下方实例代码。

:nth-child(n)选择器实例代码

下面实例代码中,通过class属性值为a的选择器匹配选择了两个div中所有的p元素,之后通过:nth-child(2)选择器,匹配选择了所有class属性值为a的p元素的父元素中的第二个子元素为p的元素,其中第二个div中的第二个子元素span则不会被选择:

<div>
  <p class="a">段落1</p>
  <p class="a">段落2</p>
</div>
<div>
  <p class="a">段落3</p>
  <span>span1</span>
</div>
<button id="test" class="btn">jQuery</button>

<script>
  $('#test').click(function(){
    $('.a:nth-child(2)').css("font-size","3.5em");
  })
</script>

免责声明:内容仅供参考,不保证正确性!


全栈前端 / jQuery教程 :






Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.