jQuery :only-child选择器

:only-child选择器语法

$('selector:only-child')

:only-child选择器语法解析

经过下方实例代码的验证,jQuery中的:only-child选择器用于二次匹配选择上述语法中selector选择到的元素的父元素中唯一的与selector类型相同的子元素,如果该父元素有多个子元素,那么即便该父元素中只有一个该类型的子元素,该子元素也不会被匹配选择。具体的可参考下方的实例代码。

:only-child选择器实例代码

如下实例代码,先使用类class属性值为d的选择器匹配选择一些元素,比如p元素,然后通过:only-child选择器匹配选择p元素的父元素——div中唯一的类型为p的子元素,因为第一个div中不止一个子元素,所以,即便第一个div中class为d的p元素只有一个,也不会被:only-child选择器匹配选择:

<div>
  <p class="d">段落1</p>
  <p>段落2</p>
</div>
<div>
  <p class="d">段落3</p>
</div>

<button id="test" class="btn">jQuery</button>

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

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


全栈前端 / jQuery教程 :






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