JQuery Get .next() Element

JQuery Get .next() Element

There are situations where you want to get value of element next to current element. In this tutorial we will see how to get next element value. We have 10 dives on html page. On click of any div element we are showing the value of next div element of clicked div.

JQuery get next element example

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js></script>

 <script type="text/javascript" language="javascript"> 

    $("document").ready(function(){
    
    $("div").click(function(){
        alert($(this).next().html());
    });           
         
     });
     
 </script>

Description

On ready state of document we are attaching click event to div element unobtrusively. To on current instance of clicked div we are calling .next() function of JQuery.

Complete HTML code to get next element of Div.

<html>
<head>
    <title>JQuery Get Next Element</title>

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

    <script type="text/javascript" language="javascript"> 
   
       $("document").ready(function(){
       
       $("div").click(function(){
           alert($(this).next().html());
       });           
            
        });
        
    </script>

</head>
<body>
    <div id="div1">Next Element of div1 is div2</div>
    <div id="div2">Next Element of div2 is div3</div>
    <div id="div3">Next Element of div3 is div4</div>
    <div id="div4">Next Element of div4 is div5</div>
    <div id="div5">Next Element of div5 is div6</div>
    <div id="div6">Next Element of div6 is div7</div>
    <div id="div7">Next Element of div7 is div8</div>
    <div id="div8">Next Element of div8 is div9</div>
    <div id="div9">Next Element of div9 is div10</div>
    <div id="div10">Next Element of div10 is body</div>   
</body>
</html>

In real life scenarios you may require to access div element by ID or CSS class name.

JQuery access element example

$(“div”) Access all div elements inside webpage.
$(“#divID”) Access div element or any element by it’s ID. Note the “#” symbol to access element by ID.
$(“.divClassName”) Access div element or any element by it’s class name, Note the “.” symbol to access div by it’s class name.
Basics of jqueryLearning JqueryJQuery Get Element By ID or class name or tag nameJquery Get Target Of EventHow to get Jquery selected optionJQuery Find Parent ElementJQuery Add ElementJQuery Hide HTML ElementjQuery Select element by class nameJQuery get Value Of TextareaGet Selected Value From Dropdownlist [JQuery]

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.