Reputation: 69
I have got a HTML as shown below
<div id="activeui4" class="activateUiHTML" data-role="collapsible">
<div class="Topping-and-Crusting-section">
<a style="display:block" id="4" vendor_items_id="4" class="btn btn-sm topp btn-sm-active" data-count="1">topping <span>1</span></a>
<a style="display:block" id="4" vendor_items_id="4" class="btn btn-sm crust " data-count="0"> crust <span></span></a>
</div>
</div>
I am trying to retrieve the value data-count
of class btn btn-sm topp btn-sm-active
I tried it like this:
var count = $(".activateUiHTML div#"+id_attr_val+".Topping-and-Crusting-section").find(".top").attr('data-count');
alert(count);
But I get back undefined
.
Upvotes: 1
Views: 62
Reputation: 1853
Cause : you are using wrong selector. class name is "topp" rather then "top".
so resolution is to change class name
var count = $(".activateUiHTML div#"+id_attr_val+".Topping-and-Crusting-section").find(".topp").data('count');
Future problem: there are 2 anchors with same class "top" so it will return data count from first element it found. so be specific . either use id or some specific class in "div"
Upvotes: 0
Reputation: 543
You miss spelled the class find('.top') theres no such element instead use .find('.topp')
use data function of jquery
var count = $(".activateUiHTML div#"+id_attr_val+".Topping-and-Crusting-section").find(".top").data('count');
Upvotes: 1
Reputation: 535
Here your problem in this line
class="btn btn-sm topp btn-sm-active"
in your javascript you called it as .top
but in your html you have .topp
.find(".top")
Upvotes: 0
Reputation: 1821
Here's the code:
var count = $("#activeui4 a.btn-sm-active").attr('data-count');
Upvotes: 0
Reputation: 5211
var count = $(".activateUiHTML .Topping-and-Crusting-section").find(".topp").data('count');
alert(count);
Your class selector 'top' is misspelled.
Demo:
Upvotes: 3