加载中...

:only-of-type1.9+

概述    only-of-type selector

返回值：jQuery

描述：选择所有没有兄弟元素，且具有相同的元素名称的元素。

  • V : 1.9jQuery( ":only-of-type" )

如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配。

示例

实例

改变每一个按钮的文字，并且加一个边框，这些按钮的父元素只有这个按钮子元素。 

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

还没有评论.