Friday, 4 June 2021

Finding last span of Div.

 To find the last span of div and apply some changes in this using JQuery, we can use :last-child selector for this, like :- 

$("div span:last-child" ).css({ color:"red" }); //apply css on last span of div

We can also use it for any element to find its last ,like if we want last paragraph in body then-

 $("p:last-child").css("background-color", "yellow"); 

Above code will select last paragraph in body or in any element.

Complete example for div last span is :-

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>

<style>

span , p {

border: 2px solid green

}

</style>

</head>

<body>

<div style="border:1px solid; width:30%"><span>span 1</span><span>span2</span></div>

<span>second paragraph</span>

<p><span>third paragraph</span><a href="page1.html">go to page1</a></p>

<button id='action'>Click to Perform Action</button>

<script>

 $('#action').click(function() {

 $("div span:last-child" ).css({ color:"red" }); //apply css on last span of div

  $('div span:last-child').text('last span text of div is changed');// change text of last span of div

 });

</script> 

</body>

</html>

9 comments:

  1. Great Content. It will useful for knowledge seekers. Keep sharing your knowledge through this kind of article.
    Perl Certification Course in Chennai
    Node JS Training Institutes in chennai

    ReplyDelete
  2. Great Post with valuable information. I am glad that I have visited this site. Share more updates.
    IELTS Coaching in T Nagar
    IELTS Coaching in Velachery

    ReplyDelete

  3. Thank you, This was the best and most interesting course. please continue to share your thoughts.

    RPA Course in Chennai
    RPA Online Course
    RPA Course In Bangalore

    ReplyDelete

Change image source dynamically on hyperlink

 Changing image source dynamically using JQuery. Here in this example I have created there hyperlink and stored all images in the same folde...