加载中...

:only-child

概述    only-child selector

返回值：Array<Element(s)>

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

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

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

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

示例

实例

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

HTML 代码: 
  1. <ul>
  2.   <li>John</li>
  3.   <li>Karl</li>
  4.   <li>Brandon</li>
  5. </ul>
  6. <ul>
  7.   <li>Glen</li>
  8. </ul>
jQuery 代码: 
  1. $("ul li:only-child")
结果: 
  1. [ <li>Glen</li> ]

实例

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>only-child demo</title>
  6.   <style>
  7.   div {
  8.     width: 100px;
  9.     height: 80px;
  10.     margin: 5px;
  11.     float: left;
  12.     background: #b9e;
  13.   }
  14.   </style>
  15.   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  16. </head>
  17. <body>
  18.  
  19. <div>
  20.   <button>Sibling!</button>
  21.   <button>Sibling!</button>
  22. </div>
  23.  
  24. <div>
  25.   <button>Sibling!</button>
  26. </div>
  27.  
  28. <div>
  29.   None
  30. </div> <div>
  31.   <button>Sibling!</button>
  32.   <button>Sibling!</button>
  33.   <button>Sibling!</button>
  34. </div>
  35.  
  36. <div>
  37.   <button>Sibling!</button>
  38. </div>
  39.  
  40. <script>
  41. $( "div button:only-child" ).text( "Alone" ).css( "border", "2px blue solid" );
  42. </script>
  43.  
  44. </body>
  45. </html>
运行一下

还没有评论.