CODEWITHSUNDEEP
javascriptjqueryhtml
espresso_coffee
espresso_coffee

Reputation: 6110

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

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.

Upvotes: 1

Views: 73

Answers (4)

JCAguilera
JCAguilera

Reputation: 976

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

Upvotes: 0

Aasim
Aasim

Reputation: 143

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

Upvotes: 1

Christopher Messer
Christopher Messer

Reputation: 2090

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

Upvotes: 2

Donald Powell
Donald Powell

Reputation: 774

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>

Upvotes: 2

Related Questions