{"id":1651,"date":"2015-10-13T23:39:37","date_gmt":"2015-10-13T21:39:37","guid":{"rendered":"http:\/\/codingexplained.com\/?p=1651"},"modified":"2017-06-11T19:33:39","modified_gmt":"2017-06-11T17:33:39","slug":"selecting-elements-data-attribute-jquery","status":"publish","type":"post","link":"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/selecting-elements-data-attribute-jquery","title":{"rendered":"Selecting Elements by Data Attribute in jQuery"},"content":{"rendered":"

Selecting elements by data attributes is very easy in jQuery. As with all other attributes, we can simply use the attribute selector. In fact, we do not need to handle the data attribute in any special way, as long as the data attribute is available in the DOM. Please consider the following example.<\/p>\n

var matches = $('.news-item[data-news-id=\"52\"]');<\/code><\/pre>\n
In the above example, we select all elements with the class news-item<\/span> that also have an attribute named data-news-id<\/span> with a value of 52<\/span>.<\/p>\n
That is really all there is to it.<\/p>\n","protected":false},"excerpt":{"rendered":"
Selecting elements by data attributes is very easy in jQuery. As with all other attributes, we can simply use the attribute selector. In fact, we do not need to handle the data attribute in any special way, as long as the data attribute is available in the DOM. Please consider the following example. var matches… read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"Selecting Elements by Data Attribute in jQuery","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[128],"tags":[73,68],"series":[],"jetpack_publicize_connections":[],"yoast_head":"\nSelecting Elements by Data Attribute in jQuery<\/title>\n<meta name=\"description\" content=\"Selecting elements by data attributes is super easy in jQuery. See this example of how to do it with a very simple selector.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/selecting-elements-data-attribute-jquery\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Selecting Elements by Data Attribute in jQuery\" \/>\n<meta property=\"og:description\" content=\"Selecting elements by data attributes is super easy in jQuery. See this example of how to do it with a very simple selector.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/selecting-elements-data-attribute-jquery\" \/>\n<meta property=\"og:site_name\" content=\"Coding Explained\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codingexplained\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codingexplained\" \/>\n<meta property=\"article:published_time\" content=\"2015-10-13T21:39:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-11T17:33:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingexplained.com\/wp-content\/uploads\/2015\/11\/codingexplained-fb-promote.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"444\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bo Andersen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codingexplained\" \/>\n<meta name=\"twitter:site\" content=\"@codingexplained\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bo Andersen\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/selecting-elements-data-attribute-jquery\",\"url\":\"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/selecting-elements-data-attribute-jquery\",\"name\":\"Selecting Elements by Data Attribute in jQuery\",\"isPartOf\":{\"@id\":\"https:\/\/codingexplained.com\/#website\"},\"datePublished\":\"2015-10-13T21:39:37+00:00\",\"dateModified\":\"2017-06-11T17:33:39+00:00\",\"author\":{\"@id\":\"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d\"},\"description\":\"Selecting elements by data attributes is super easy in jQuery. See this example of how to do it with a very simple selector.\",\"breadcrumb\":{\"@id\":\"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/selecting-elements-data-attribute-jquery#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/selecting-elements-data-attribute-jquery\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/selecting-elements-data-attribute-jquery#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codingexplained.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Selecting Elements by Data Attribute in jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codingexplained.com\/#website\",\"url\":\"https:\/\/codingexplained.com\/\",\"name\":\"Coding Explained\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codingexplained.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d\",\"name\":\"Bo Andersen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codingexplained.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g\",\"caption\":\"Bo Andersen\"},\"description\":\"I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!\",\"sameAs\":[\"https:\/\/codingexplained.com\",\"https:\/\/www.facebook.com\/codingexplained\",\"https:\/\/www.linkedin.com\/in\/ba0708\",\"https:\/\/twitter.com\/codingexplained\",\"https:\/\/www.youtube.com\/c\/codingexplained\"],\"url\":\"https:\/\/codingexplained.com\/author\/andy\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Selecting Elements by Data Attribute in jQuery","description":"Selecting elements by data attributes is super easy in jQuery. See this example of how to do it with a very simple selector.","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:\/\/codingexplained.com\/coding\/front-end\/javascript\/selecting-elements-data-attribute-jquery","og_locale":"en_US","og_type":"article","og_title":"Selecting Elements by Data Attribute in jQuery","og_description":"Selecting elements by data attributes is super easy in jQuery. See this example of how to do it with a very simple selector.","og_url":"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/selecting-elements-data-attribute-jquery","og_site_name":"Coding Explained","article_publisher":"https:\/\/www.facebook.com\/codingexplained","article_author":"https:\/\/www.facebook.com\/codingexplained","article_published_time":"2015-10-13T21:39:37+00:00","article_modified_time":"2017-06-11T17:33:39+00:00","og_image":[{"width":1200,"height":444,"url":"https:\/\/codingexplained.com\/wp-content\/uploads\/2015\/11\/codingexplained-fb-promote.png","type":"image\/png"}],"author":"Bo Andersen","twitter_card":"summary_large_image","twitter_creator":"@codingexplained","twitter_site":"@codingexplained","twitter_misc":{"Written by":"Bo Andersen"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/selecting-elements-data-attribute-jquery","url":"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/selecting-elements-data-attribute-jquery","name":"Selecting Elements by Data Attribute in jQuery","isPartOf":{"@id":"https:\/\/codingexplained.com\/#website"},"datePublished":"2015-10-13T21:39:37+00:00","dateModified":"2017-06-11T17:33:39+00:00","author":{"@id":"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d"},"description":"Selecting elements by data attributes is super easy in jQuery. See this example of how to do it with a very simple selector.","breadcrumb":{"@id":"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/selecting-elements-data-attribute-jquery#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingexplained.com\/coding\/front-end\/javascript\/selecting-elements-data-attribute-jquery"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/codingexplained.com\/coding\/front-end\/javascript\/selecting-elements-data-attribute-jquery#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingexplained.com\/"},{"@type":"ListItem","position":2,"name":"Selecting Elements by Data Attribute in jQuery"}]},{"@type":"WebSite","@id":"https:\/\/codingexplained.com\/#website","url":"https:\/\/codingexplained.com\/","name":"Coding Explained","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingexplained.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d","name":"Bo Andersen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingexplained.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g","caption":"Bo Andersen"},"description":"I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!","sameAs":["https:\/\/codingexplained.com","https:\/\/www.facebook.com\/codingexplained","https:\/\/www.linkedin.com\/in\/ba0708","https:\/\/twitter.com\/codingexplained","https:\/\/www.youtube.com\/c\/codingexplained"],"url":"https:\/\/codingexplained.com\/author\/andy"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3mJkW-qD","_links":{"self":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts\/1651"}],"collection":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/comments?post=1651"}],"version-history":[{"count":4,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts\/1651\/revisions"}],"predecessor-version":[{"id":2927,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts\/1651\/revisions\/2927"}],"wp:attachment":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/media?parent=1651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/categories?post=1651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/tags?post=1651"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/series?post=1651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}