Reputation: 363
Ok, so I am trying to get the data- attribute from the parent div instead of getting it from every anchor. I have tried using closest, but that does not work. Here is my following code.
<div class="cat black">
<a class="cat_col" data-color="black">Tom</a>
<a class="cat_col" data-color="black">Cotton</a>
<a class="cat_col" data-color="black">Major</a>
</div>
and this is the jQuery code I have:
$('body').on('click', '.cat_col', function(event) {
event.preventDefault();
var $CatColor = $(this).data("color");
getCats ($showCategory);
});
I don't have a problem with this, but once I start populating things, it will get a little confusing, plus there will be more options. So, I was wondering if it was possible to get the data- from the parent div instead of every child. So, do something like this.
<div class="cat black" data-color="black">
<a class="cat_col">Tom</a>
<a class="cat_col">Cotton</a>
<a class="cat_col">Major</a>
</div>
$('body').on('click', '.cat_col', function(event) {
event.preventDefault();
var $CatColor = $(this).closest.data("color");
getCats ($showCategory);
});
What am I doing wrong? or is this just impossible?
Upvotes: 0
Views: 635
Reputation: 108
If I understand you correctly, you want to get the color from the parent div, if so use the parent() function like so:
$('body').on('click', '.cat_col', function(event) {
event.preventDefault();
var $CatColor = $(this).parent().data("color");
console.log($CatColor);
});
Here is a fiddle.
Upvotes: 1
Reputation: 5788
You can also find closest("div")
as well
$('body').on('click', '.cat_col', function(event) {
event.preventDefault();
var $CatColor = $(this).closest("div").data("color");
alert($CatColor);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cat black" data-color="black">
<a class="cat_col">Tom</a>
<a class="cat_col">Cotton</a>
<a class="cat_col">Major</a>
</div>
Upvotes: 2
Reputation: 723
$('body').on('click', '.cat_col', function(event) {
event.preventDefault();
var $CatColor = $(this).parent().data("color");
alert($CatColor);
getCats ($showCategory);
});
Upvotes: 1
Reputation: 516
You need to specify which element is closest
$('body').on('click', '.cat_col', function(event) {
event.preventDefault();
var $CatColor = $(this).closest('.cat').attr('data-color');
getCats ($showCategory);
});
Upvotes: 1