How to select items inside data header using jQuery?

Question

I have an html form, for example: How to choose Gray / Silver from data-name ?

<div class="value"> <div class="color-box grey-silver-color-gradient" data-title="Grey / Silver" data-toggle="tooltip" data-original-title="" title=""></div> </div> 

I wrote my code but did not get the result. here

 var data = $('.value').data('title'); console.log(data); 

Help me. Thanks at advace

Answer 1

Your problem: data-title is in child element .value .

try: -

 var data = $('.value > .color-box').data('title'); console.log(data); 

or

 var data = $('.color-box').data('title'); console.log(data); 

Answer 2

You have to do

 var data = $(".color-box.grey-silver-color-gradient").data("title"); console.log(data); 

Answer 3

You can get the attribute from the tag using attr from jquery

Example:

 $('*[userattribute]').attr('userattribute'); 

Answer 4

You select one element and then expect to get a property of another element. $('.value') selects the parent div of the one you want to select.

You should try this while preserving the specifics for the child $('.value') :

 var data = $('.value .color-box.grey-silver-color-gradient').data("title"); console.log(data); 

or any child whose data-title attribute has a value:

 var data = $(".value [data-title!='']").data("title"); console.log(data); 

jsfiddle: https://jsfiddle.net/o3ffptj3/1/

Answer 5

You can select it by jquery method like this

 $(selector).data('name'); 

in your case like this

 var data = $('.value > .color-box').data('name'); 

Answer 6

You can use attr ()

 var data = $('.value div').attr('data-title');