加载中...

:only-child


概述    only-child selector

返回值:Array<Element(s)>

描述:如果某个元素是其父元素的唯一子元素,那么它就会被选中。

  • V : 1.1.4jQuery( ":only-child" )

若父元素有其他子元素,就不会被匹配。

如果父元素中含有其他元素,那将不会被匹配。(注:这里的其他元素并不包含文本节点,如:<p><img/>图片</p>,用$('p img:only-child')是可以匹配)

示例

实例

在 ul 中查找是唯一子元素的 li

HTML 代码:
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
</ul>
jQuery 代码:
$("ul li:only-child")
结果:
[ <li>Glen</li> ]

实例

若每个 div 中只有一个按钮,则改变这些按钮的外观。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>only-child demo</title>
  <style>
  div {
    width: 100px;
    height: 80px;
    margin: 5px;
    float: left;
    background: #b9e;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
 
<div>
  <button>Sibling!</button>
</div>
 
<div>
  None
</div> <div>
  <button>Sibling!</button>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
 
<div>
  <button>Sibling!</button>
</div>
 
<script>
$( "div button:only-child" ).text( "Alone" ).css( "border", "2px blue solid" );
</script>
 
</body>
</html>
运行一下


还没有评论.