• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :only-of-type

    选择所有没有兄弟元素,且具有相同的元素名称的元素。

    jQuery(":only-of-type")

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

    例子

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

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      div { width:200px; height:150px; margin:5px;padding:20px;float:left; background:#b9e; }
      span {display:block;padding: 2px; margin: 3px;border: 1px solid #000; }
      button {display:block;padding: 2px; margin: 3px;}
    </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <div>
      <button>Sibling!</button>
      <button>Sibling!</button>
    </div>
     
    <div>
      <button>Sibling!</button>
    </div>
    <div>
      None
    </div>
     
    <div>
      <button>Sibling!</button>
      <span>Sibling!</span>
      <span>Sibling!</span>
     
    </div>
    <div>
      <button>Sibling!</button>
    </div>
    <script>
      $("button:only-of-type").text("Alone").css("border", "2px blue solid");
    </script>
     
    </body>
    </html>
    
    None
    Sibling!Sibling!