jQuery First and Last Selector

Asp.Net CS By Example 28 April 2021

jQuery to Select First and Last Children

In this post, we are learning about jQuery to Select First and Last Children. To select all <p> elements in a page, we can use this selector.

 $('p')

To select all <p> elements that are the first children of their parent elements, we can use this selector:

 $('p:first')

To select all <p> elements that are the last children of their parent elements,we can use this selector:

 $('p:last')

Below code example puts for see above jQuery to Select First and Last Children selector working.

jqscript.html

<html>
<head>
 <title>
  Selecting the first and last
  children
 </title>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script type="text/javascript">
  function setStyle() {
   $('p:first-child').css("font-style", "italic");
   $('p:last-child').css("font-style", "italic");
  }
 </script> 
</head>
<body>
 <h1>
   Selecting the first and last
   children
 </h1>
 <div>
  <p>This is paragraph 1.</p>
  <p>This is paragraph 2.</p>
  <p>This is paragraph 3.</p>
  <p>This is paragraph 4.</p>
 </div>
 <form>
  <input type="button"
    value="Select"
    onclick="setStyle()"
  </input>
 </form>
</body>
</html>

Output:

Thanks for reading jQuery First and Last Selector

28 April 2021

jQuery First and Last Selector

No comments:

Post a Comment