单击同一div中的li元素？JQuery/JavaScript

在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或数据值的方法，请告诉我。提前感谢。

通过单击函数传递事件参数，然后使用e.currentTarget向下搜索并获取子元素id

$（'.myMenu ul li'）。在（'click'，函数（e）上{
console.log（$（e.currentTarget.children（）.attr（'id'））；
});

第一组


测试1


测试2


第2组


测试3


测试4


第3组


测试5


通过单击函数传递事件参数，然后使用e.currentTarget向下搜索并获取子元素id


$（'.myMenu ul li'）。在（'click'，函数（e）上{
console.log（$（e.currentTarget.children（）.attr（'id'））；
});

第一组


测试1


测试2


第2组


测试3


测试4


第3组


测试5


下面的代码用于记录id。如果要获取数据属性，只需将行
.id
替换为
.dataset.code
——您的
.myMenu
类现在拼写错误，因此您必须首先修复该问题。然后你想得到li范围内的数据，所以我刚刚访问了它

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

工作仓：

下面的代码用于记录id。如果要获取数据属性，只需将行
.id
替换为
.dataset.code
——您的
.myMenu
类现在拼写错误，因此您必须首先修复该问题。然后你想得到li范围内的数据，所以我刚刚访问了它

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

工作仓：

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

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

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

如果你想得到“id”和“data code”属性，看看这个

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

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

您可以使用以下选项：

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

然后在任何需要的地方使用
id
和
数据

您可以使用以下功能：

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

然后在任何需要的地方使用
id
和
数据

除了jQuery选择器中的
.myMneu
输入错误，以及
prop（“id”）
中“id”周围缺少引号之外。另外，
id
和
data code
属性位于
li
所包含的
span
元素上，而不是
li
本身，因此您应该将单击处理程序放在
span
上，或者使用
$（this）。查找（'span'）
以获取元素。我已经尝试了这个方法，并且对我有效：$（'.myMenu-ul li'）。on（'click'，function（）{console.log（$（this）.find（'span'）.prop（'id'）+'/'+$（this）.find（'span'）.attr（'data-code'））；}）；除了jQuery选择器中的
.myMneu
输入错误以及
prop（“id”）中“id”周围缺少引号之外
。此外，
id
和
data code
属性位于
li
所包含的
span
元素上，而不是
li
本身，因此您应该将单击处理程序放在
span
上，或者使用
$（this）。查找（'span'）
以获取元素。我已经尝试过这个方法，并且对我有效：$（'.myMenu ul li'）.on（'click'，function（）{console.log（$（this）.find（'span'）.prop（'id'）+'）/'+$（this.find（'span'）.attr（'data-code'））；}）；