JQuery - attribute of value attribute with active class

Question

I am trying to display a data attribute when the anchor tag has an active class in my console.log

Unfortunately, it always outputs null .

I mentioned this question about surface stack

here is my HTML :

 $(document).ready(function () { $('.list-group-item').on('click', function (e) { var previous = $(this).closest(".list-group").children(".active"); previous.removeClass('active'); // previous list-item $(e.target).addClass('active'); // activated list-item var itemType = $('.list-group a').find('.active').data('itemtype'); console.log(itemType); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="list-group"> <a href="#" class="list-group-item" data-itemtype="1">Cras justo odio</a> <a href="#" class="list-group-item" data-itemtype="0">Dapibus ac facilisis in</a> <a href="#" class="list-group-item" data-itemtype="3">Morbi leo risus</a> <a href="#" class="list-group-item" data-itemtype="4">Porta ac consectetur ac</a> <a href="#" class="list-group-item" data-itemtype="2">Vestibulum at eros</a> </div> 

please help me keep abreast of development.

Thank you in advance

Answer 1

For such an "active" class in a div that has a list-group class, use the $('.list-group').find('.active').data('itemtype') selector instead of $('.list-group a').find('.active').data('itemtype') $('.list-group').find('.active').data('itemtype') .

Your selector $('.list-group a').find('.active').data('itemtype') will try to find the active class in the a div tag with the list-group class that is creating the problem.

Please check the working snippet.

 $(document).ready(function () { $('.list-group-item').on('click', function (e) { var previous = $(this).closest(".list-group").children(".active"); previous.removeClass('active'); // previous list-item $(e.target).addClass('active'); // activated list-item var itemType = $('.list-group').find('.active').data('itemtype'); console.log(itemType); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="list-group"> <a href="#" class="list-group-item" data-itemtype="1">Cras justo odio</a> <a href="#" class="list-group-item" data-itemtype="0">Dapibus ac facilisis in</a> <a href="#" class="list-group-item" data-itemtype="3">Morbi leo risus</a> <a href="#" class="list-group-item" data-itemtype="4">Porta ac consectetur ac</a> <a href="#" class="list-group-item" data-itemtype="2">Vestibulum at eros</a> </div> 

Answer 2

 Try this one $(document).ready(function () { $('.list-group-item').on('click', function (e) { var previous = $(this).closest(".list-group").children(".active"); previous.removeClass('active'); // previous list-item $(e.target).addClass('active'); // activated list-item var itemType = $('.list-group a').find('.active').attr('data-itemtype'); console.log(itemType); }); }); 

Answer 3

Your code did not work, since anchor has no children / children when using the operator $('.list-group a').find('.active') , so you get undefined , here you can use .filter() instead of .find()

  var itemtype = $('.list-group a').filter('.active').data('itemtype'); 

How you added the active class to the previous statement. Direct use of $(e.target).data('itemtype'); ,

According to the HTML, you can also use this instead of e.target .

 jQuery(document).ready(function() { $('.list-group-item').on('click', function(e) { //Remove active class from siblings $(this).closest(".list-group").children(".active").removeClass('active') // activated list-item $(this).addClass('active'); var itemType = $(this).data('itemtype'); console.log(itemType); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="list-group"> <a href="#" class="list-group-item" data-itemtype="1">Cras justo odio</a> <a href="#" class="list-group-item" data-itemtype="0">Dapibus ac facilisis in</a> <a href="#" class="list-group-item" data-itemtype="3">Morbi leo risus</a> <a href="#" class="list-group-item" data-itemtype="4">Porta ac consectetur ac</a> <a href="#" class="list-group-item" data-itemtype="2">Vestibulum at eros</a> </div> 

Answer 4

I think this will help you.

 var itemtype=$(".list-group a.active").attr('data-itemtype') 

Answer 5

Here is an example of the event $('.list-group-item').on('click')

 $('.list-group-item').on('click', function (e) { var previous = $(".list-group-item"); previous.removeClass('active'); // previous list-item $(this).addClass('active'); // activated list-item var itemType = $('.list-group a.active').attr('data-itemtype'); console.log($(itemType); }); 

Answer 6

@Terence, always outputs null , because the find function receives child elements.

This code is var itemType = $('.list-group a').find('.active').data('itemtype'); returns null , because there are no descendants inside the anchor that have a class called active

You can do this as follows to get the data-attribute you want.

 $(document).ready(function() { $('.list-group-item').on('click', function(event) { var previous = $('.list-group-item.active'); previous.removeClass('active'); // previous list-item $(this).addClass('active'); // activated list-item var itemType = $(this).data('itemtype'); console.clear(); console.log(itemType); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <div class="list-group"> <a href="#" class="list-group-item" data-itemtype="1">Cras justo odio</a> <a href="#" class="list-group-item" data-itemtype="0">Dapibus ac facilisis in</a> <a href="#" class="list-group-item" data-itemtype="3">Morbi leo risus</a> <a href="#" class="list-group-item" data-itemtype="4">Porta ac consectetur ac</a> <a href="#" class="list-group-item" data-itemtype="2">Vestibulum at eros</a> </div>