{"id":10800,"date":"2016-02-17T16:15:21","date_gmt":"2016-02-17T14:15:21","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=10800"},"modified":"2017-12-21T15:34:11","modified_gmt":"2017-12-21T13:34:11","slug":"jquery-next-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/","title":{"rendered":"jQuery Next Example"},"content":{"rendered":"

The aim of this example is to show you how to use the jQuery next()<\/code> method.<\/p>\n

The jQuery next()<\/code> method is used for getting the next element of any HTML element. <\/p>\n

This method takes the wanted elements type as an optional argument. For example, next('span')<\/code> is used to get the immediate following ‘span’ element. <\/p>\n

By using this method, only the following sibling’s element is select, it’s child element will be ignore.
\n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

1. HTML<\/h2>\n

First of all you need to create a simple html document.<\/p>\n

jQueryNextExample.html<\/em><\/span><\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>jQuery Next Example<\/title>\r\n\t<script src=\"jquery-2.1.4.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
2. jQuery Next examples<\/h2>\n
2.1 Get Next Element Example <\/h3>\n
Let\u2019s add the following simple html code.<\/p>\n
\r\n<div id=\"div1\">This is div1<\/div>\r\n<p>This is paragrah<\/p>\r\n<div>Others3<\/div>\r\n<button id=\"nextButton\">next('div')<\/button>\r\n<\/pre>\n
In the following example, we need to get the next element regardless to its type. For that we don’t pass any parameter to the next()<\/code> method.<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n    $(\"#nextButton\").click(function () {\r\n\t  var nextElement = $(\"#div1\").next();\r\n\t  alert(nextElement.text());\r\n    });\r\n<\/script>\r\n<\/pre>\n
The result in the browser would be:<\/p>\n
\"jQueryNextExample2\"<\/a>
Get Next Element Example<\/figcaption><\/figure>\n
2.2 Get Next DIV Example <\/h3>\n
Let\u2019s add the following simple html code.<\/p>\n
\r\n<div id=\"div1\" style=\"background:#f00\">This is div1<\/div>\r\n<div>This is div2<\/div>\r\n<p>This is paragrah<\/p>\r\n<div>This is div3<\/div>\r\n<button id=\"nextButton\">next('div')<\/button>\r\n<\/pre>\n
To get an element with a specific type, we need to pass the element type. As you can notice in the following example .<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n    $(\"#nextButton\").click(function () {\r\n\t  var nextElement = $(\"#div1\").next(\"div\");\r\n\t  $(\"div,p\").css(\"background\", \"\");\r\n          nextElement.css(\"background\", \"#f00\");\r\n    });\r\n<\/script>\r\n<\/pre>\n
The result in the browser would be:<\/p>\n
\"Get<\/a>
Get Next DIV Example<\/figcaption><\/figure>\n
3. Conclusion<\/h2>\n
jQuery provides a good and simple method to get the next element. This method helps us to navigate in the html document.This method takes the wanted elements type as an optional argument. For example, next('span')<\/code> is used to get the immediate following ‘span’ element. Calling this method without a parameter means getting the next element regardless its type. <\/p>\n
4. Download the source code<\/h2>\n
 Download: <\/strong>You can download the full source code of this example here: jquery next example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
The aim of this example is to show you how to use the jQuery next() method. The jQuery next() method is used for getting the next element of any HTML element. This method takes the wanted elements type as an optional argument. For example, next(‘span’) is used to get the immediate following ‘span’ element. By …<\/p>\n","protected":false},"author":106,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-10800","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"\njQuery Next Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to show you how to use the jQuery next() method. The jQuery next() method is used for getting the next element of any HTML\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Next Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to show you how to use the jQuery next() method. The jQuery next() method is used for getting the next element of any HTML\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-17T14:15:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T13:34:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Saeb Najim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Saeb Najim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/\"},\"author\":{\"name\":\"Saeb Najim\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/7554117e1066be33eda4c81bac192cc9\"},\"headline\":\"jQuery Next Example\",\"datePublished\":\"2016-02-17T14:15:21+00:00\",\"dateModified\":\"2017-12-21T13:34:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/\"},\"wordCount\":281,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/\",\"name\":\"jQuery Next Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2016-02-17T14:15:21+00:00\",\"dateModified\":\"2017-12-21T13:34:11+00:00\",\"description\":\"The aim of this example is to show you how to use the jQuery next() method. The jQuery next() method is used for getting the next element of any HTML\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery Next Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/7554117e1066be33eda4c81bac192cc9\",\"name\":\"Saeb Najim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1a6884eb32867720ef22a2a7728235120963a9a750d54d0356d5e3619ad3cd06?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1a6884eb32867720ef22a2a7728235120963a9a750d54d0356d5e3619ad3cd06?s=96&d=mm&r=g\",\"caption\":\"Saeb Najim\"},\"description\":\"Saeb has graduated from the University of Technology. During the last ten years (since 2005) he has been involved with a large number of projects about programming, software engineering, design and analysis . He works as a senior Software Engineer in the e-commerce and web development sector where he is mainly responsible for projects based on Java, Java frameworks, design patterns and Big Data technologies.\",\"sameAs\":[\"http:\/\/www.webcodegeeks.com\/\",\"https:\/\/www.linkedin.com\/in\/saebnajim\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/saeb-najim\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Next Example - Web Code Geeks - 2026","description":"The aim of this example is to show you how to use the jQuery next() method. The jQuery next() method is used for getting the next element of any HTML","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Next Example - Web Code Geeks - 2026","og_description":"The aim of this example is to show you how to use the jQuery next() method. The jQuery next() method is used for getting the next element of any HTML","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2016-02-17T14:15:21+00:00","article_modified_time":"2017-12-21T13:34:11+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Saeb Najim","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Saeb Najim","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/"},"author":{"name":"Saeb Najim","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/7554117e1066be33eda4c81bac192cc9"},"headline":"jQuery Next Example","datePublished":"2016-02-17T14:15:21+00:00","dateModified":"2017-12-21T13:34:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/"},"wordCount":281,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/","name":"jQuery Next Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2016-02-17T14:15:21+00:00","dateModified":"2017-12-21T13:34:11+00:00","description":"The aim of this example is to show you how to use the jQuery next() method. The jQuery next() method is used for getting the next element of any HTML","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-next-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery Next Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/7554117e1066be33eda4c81bac192cc9","name":"Saeb Najim","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1a6884eb32867720ef22a2a7728235120963a9a750d54d0356d5e3619ad3cd06?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1a6884eb32867720ef22a2a7728235120963a9a750d54d0356d5e3619ad3cd06?s=96&d=mm&r=g","caption":"Saeb Najim"},"description":"Saeb has graduated from the University of Technology. During the last ten years (since 2005) he has been involved with a large number of projects about programming, software engineering, design and analysis . He works as a senior Software Engineer in the e-commerce and web development sector where he is mainly responsible for projects based on Java, Java frameworks, design patterns and Big Data technologies.","sameAs":["http:\/\/www.webcodegeeks.com\/","https:\/\/www.linkedin.com\/in\/saebnajim"],"url":"https:\/\/www.webcodegeeks.com\/author\/saeb-najim\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/10800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/106"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=10800"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/10800\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=10800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=10800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=10800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}