On click li element in the same div? JQuery/JavaScript

Question

I have three different ul groups inside of the div. I would like to get id and data attribute value when user clicks on li element. Here is my HTML:

     <div class="myMenu">
        <div id="groupList1">
            <fieldset>
                <legend>Group 1</legend>
                <ul>
                    <li>
                        <span id="gr1" data-code="GRVAL1">Test 1</span>
                    </li>
                    <li>
                        <span id="gr2" data-code="GRVAL2">Test 2</span>
                    </li>
                </ul>
            </fieldset>
        </div>
        <div id="groupList2">
            <fieldset>
                <legend>Group 2</legend>
                <ul>
                    <li>
                        <span id="gr3" data-code="GRVAL3">Test 3</span>
                    </li>
                    <li>
                        <span id="gr4" data-code="GRVAL4">Test 4</span>
                    </li>
                </ul>
            </fieldset>
        </div>
        <div id="groupList3">
            <fieldset>
                <legend>Group 3</legend>
                <ul>
                    <li>
                        <span id="gr5" data-code="GRVAL5">Test 5</span>
                    </li>
                </ul>
            </fieldset>
        </div>
    </div> 

I have tried this but I didn't get the id or data attribute value:

$('.myMenu ul li').on('click', function(){
    console.log($(this).prop('id'));
});

If anyone knows the way to return the id or data value please let me know. Thanks in advance.

Answer 1

Pass event parameter through your click function, then use e.currentTarget to drill down and get child element id.

 $('.myMenu ul li').on('click', function(e){ console.log($(e.currentTarget).children().attr('id')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="myMenu"> <div id="groupList1"> <fieldset> <legend>Group 1</legend> <ul> <li> <span id="gr1" data-code="GRVAL1">Test 1</span> </li> <li> <span id="gr2" data-code="GRVAL2">Test 2</span> </li> </ul> </fieldset> </div> <div id="groupList2"> <fieldset> <legend>Group 2</legend> <ul> <li> <span id="gr3" data-code="GRVAL3">Test 3</span> </li> <li> <span id="gr4" data-code="GRVAL4">Test 4</span> </li> </ul> </fieldset> </div> <div id="groupList3"> <fieldset> <legend>Group 3</legend> <ul> <li> <span id="gr5" data-code="GRVAL5">Test 5</span> </li> </ul> </fieldset> </div> </div> 

Answer 2

The below works for logging the id. If you want to get the data attribute, just replace the line .id with .dataset.code -- Your .myMenu class is misspelled right now, so you first had to fix that. Then you're looking to get the data in the span of the li, so I just accessed that.

$('.myMenu ul li').on('click', function(){
    console.log($(this)[0].children[0].id);
});

Working bin:

http://jsbin.com/yinitirawi/edit?html,js,output

Answer 3

If wanna get the "id" and "data-code" attributes then look at this,

To get attributes value of every "li" you need to specify the "span" tag as well to get the correct attribute's value. Use the following jquery code.

$(function(){
        $('.myMenu ul li span').on('click',function(){
            console.log($(this).attr('id')+", "+$(this).attr('data-code'));
        });
    });

Answer 4

You can use this:

$(document).ready(function(){
  $('li').click(function(){
    var id = $(this).children().attr('id');
    var data = $(this).children().attr('data-code');
  });
});

and then use id and data wherever you want.

http://jsbin.com/lixodoyuha/edit?html,js,output