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.

And the lack of quotes around "id" in prop("id"). Also, the id and data-code attributes are on a span element contained by the li, not on the li itself, so you should put the click handler on the span, or use $(this).find('span') to get the element. — Heretic Monkey
– Heretic Monkey, Commented Aug 10, 2017 at 20:24
I have tried this and works for me: $('.myMenu ul li').on('click', function(){ console.log($(this).find('span').prop('id') +' / '+ $(this).find('span').attr('data-code')); }); — espresso_coffee
– espresso_coffee, Commented Aug 10, 2017 at 20:35

Donald Powell · Accepted Answer · 2017-08-10 20:29:44Z

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>

Christopher Messer · Accepted Answer · 2017-08-10 20:30:20Z

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

answered Aug 10, 2017 at 20:30

Christopher Messer

2,09011 silver badges13 bronze badges

Comments

Aasim · Accepted Answer · 2017-08-10 20:41:18Z

1

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'));
        });
    });

answered Aug 10, 2017 at 20:41

Aasim

1433 silver badges14 bronze badges

Comments

JCAguilera · Accepted Answer · 2017-08-10 20:46:19Z

0

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

answered Aug 10, 2017 at 20:46

JCAguilera

9761 gold badge13 silver badges38 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related