在同一div中单击li元素？ jQuery / JavaScript

Question

我在div中有三个不同的ul组。 当用户单击li元素时，我想获取id和data属性值。 这是我的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> 

我已经尝试过了，但是没有得到id或data属性值：

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

如果有人知道返回ID或数据值的方法，请告诉我。 提前致谢。

Answer 1

通过click函数传递事件参数，然后使用e.currentTarget向下钻取并获取子元素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

以下用于记录ID。 如果要获取data属性，只需将.id行替换为.dataset.code －您的.myMenu类现在拼写错误，因此您首先必须解决此问题。 然后，您正在寻找在li范围内的数据，所以我刚刚访问了它。

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

工作箱：

http://jsbin.com/yinitirawi/edit?html,js，输出

Answer 3

如果要获取“ id”和“数据代码”属性，请查看此属性，

要获取每个“ li”的属性值，还需要指定“ span”标签，以获取正确的属性值。 使用以下jquery代码。

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

Answer 4

您可以使用此：

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

然后在任何需要的地方使用id和data 。

http://jsbin.com/lixodoyuha/edit?html,js，输出