{"id":30,"date":"2023-08-25T17:38:08","date_gmt":"2023-08-25T17:38:08","guid":{"rendered":"\/\/api.jqueryui.com\/1.10\/?p=30"},"modified":"2023-08-25T17:38:08","modified_gmt":"2023-08-25T17:38:08","slug":"data-selector","status":"publish","type":"post","link":"https:\/\/api.jqueryui.com\/1.10\/data-selector\/","title":{"rendered":":data() Selector"},"content":{"rendered":"

data selector<\/span><\/h2>\n
\n

Description: <\/strong>Selects elements which have data stored under the specified key.<\/p>\n

  • \n

    jQuery( ":data(key)" )<\/h4>\n

    key: <\/strong>The data key.<\/p>\n<\/li><\/ul>\n

    \n\t\t

    The expression $( "div:data(foo)")<\/code> matches a <div><\/code> if it has data stored via .data( "foo", value )<\/code>.<\/p>\n\t<\/div>\n

    Example:<\/h2><\/header>
    \n

    Select elements with data and change their background color.<\/p>\n

    \n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\t
    1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
    35<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
    		\n\t\t\t\t\t
    <!doctype html<\/span>><\/span><\/code><\/div><\/div>
    <html<\/span> lang<\/span>="en"<\/span>><\/span><\/code><\/div><\/div>
    <head<\/span>><\/span><\/code><\/div><\/div>
      <meta<\/span> charset<\/span>="utf-8"<\/span>><\/span><\/code><\/div><\/div>
      <title<\/span>><\/span>data demo<\/title<\/span>><\/span><\/code><\/div><\/div>
      <link<\/span> rel<\/span>="stylesheet"<\/span> href<\/span>="\/\/code.jquery.com\/ui\/1.10.4\/themes\/smoothness\/jquery-ui.css"<\/span>><\/span><\/code><\/div><\/div>
      <style<\/span>><\/span><\/span><\/code><\/div><\/div>
      div<\/span> {<\/code><\/div><\/div>
        width<\/span>: 100px<\/span>;<\/code><\/div><\/div>
        height<\/span>: 100px<\/span>;<\/code><\/div><\/div>
        border<\/span>: 1px<\/span> solid #000<\/span>;<\/code><\/div><\/div>
        float<\/span>: left;<\/code><\/div><\/div>
      }<\/code><\/div><\/div>
      <\/style<\/span>><\/span><\/code><\/div><\/div>
      <script<\/span> src<\/span>="\/\/code.jquery.com\/jquery-1.10.2.js"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/div><\/div>
      <script<\/span> src<\/span>="\/\/code.jquery.com\/ui\/1.10.4\/jquery-ui.js"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/div><\/div>
    <\/head<\/span>><\/span><\/code><\/div><\/div>
    <body<\/span>><\/span><\/code><\/div><\/div>
     <\/code><\/div><\/div>
    <div<\/span> id<\/span>="one"<\/span>><\/span><\/div<\/span>><\/span><\/code><\/div><\/div>
    <div<\/span> id<\/span>="two"<\/span>><\/span><\/div<\/span>><\/span><\/code><\/div><\/div>
    <div<\/span> id<\/span>="three"<\/span>><\/span><\/div<\/span>><\/span><\/code><\/div><\/div>
     <\/code><\/div><\/div>
    <script<\/span>><\/span><\/span><\/code><\/div><\/div>
    $( "#one"<\/span> ).data( "color"<\/span>, "blue"<\/span> );<\/code><\/div><\/div>
    $( "#three"<\/span> ).data( "color"<\/span>, "green"<\/span> );<\/code><\/div><\/div>
     <\/code><\/div><\/div>
    $( ":data(color)"<\/span> ).each(function<\/span>(<\/span>) <\/span>{<\/code><\/div><\/div>
      var<\/span> element = $( this<\/span> );<\/code><\/div><\/div>
      element.css( "backgroundColor"<\/span>, element.data( "color"<\/span> ) );<\/code><\/div><\/div>
    });<\/code><\/div><\/div>
    <\/script<\/span>><\/span><\/code><\/div><\/div>
     <\/code><\/div><\/div>
    <\/body<\/span>><\/span><\/code><\/div><\/div>
    <\/html<\/span>><\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
    Demo:<\/h4>\n
    <\/div>\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"
    Selects elements which have data stored under the specified key.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,9],"tags":[],"class_list":["post-30","post","type-post","status-publish","format-standard","hentry","category-selectors","category-ui-core"],"_links":{"self":[{"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/posts\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":1,"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/posts\/30\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/posts\/30\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/media?parent=30"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/categories?post=30"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.10\/wp-json\/wp\/v2\/tags?post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}