Next »
1912/1956
« Previous

Only child (:only-child)

Description and Syntax

$(':only-child')

selects all elements that are the only child of their parent element.

Examples

SelectorSelects
$(':only-child')all elements in the document that are the only child of their parent element
$('code:only-child')all <code> elements that are the only child of their parent element

The following code finds the button with no siblings in each matched div and modifies look.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function(){<!--   w  ww. jav  a  2s  .c om-->
          $("div ul:only-child")
           .text("only has ul").css("border", "2px blue solid");
        });
    </script>
  </head>
  <body>
    <body>
      <div>
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
      </div>
      <div>
        <ul>
            <li>D</li>
            <li>E</li>
            <li>F</li>
            <li>G</li>
            
        </ul>
      </div>
      <div>
        <ul>
            <li>H</li>
            <li>I</li>
            <li>J</li>
            <li>K</li>
        </ul>
      </div>

    </body>
</html>

Click to view the demo

The code above generates the following result.

Only child (:only-child)
Next »
« Previous