jQuery | :only-child 选择器

什么是 :only-child 选择器？

:only-child 选择器表示选中只有一个子元素的父元素。这里的“子元素”指的是直接子元素，而不是孙子或更远的后代元素。

如何使用 :only-child 选择器？

:only-child 选择器可以与其他选择器组合使用，例如 $('div:only-child') 将选择所有只有一个直接子元素的 div 元素。

以下是一些示例：

// 选择只有一个子元素的父级 div 元素
$('div:only-child').css('background-color', 'yellow');

// 选择只有一个子元素的父级 li 元素
$('li:only-child').css('background-color', 'yellow');

// 选择某一 class 的元素中只有一个子元素的父级元素
$('.my-class:only-child').css('background-color', 'yellow');

:only-child 选择器的注意事项

• :only-child 选择器只匹配只有一个子元素的父级元素，如果有多个子元素，则不会被选中。

• 如果父级元素只有一个文本节点而没有其他节点，则该文本节点将被视为其唯一子元素，也会被选中。

• 如果要同时选中只有一个或是其它数量的子元素，可以使用 jQuery 的兄弟选择器，如 :eq()、:first、:last 等。

总结

通过 :only-child 选择器，我们可以轻松地选择只有一个子元素的父级元素，它可以帮助开发人员更加高效地操作 DOM 元素。

参考资料

• jQuery API Documentation