无法获取<；的值；li数据-*>；元素。尝试了Javascript和Jquery

下面是我的下拉列表

<ul id="navBar" data-value="">
        <li data-city-value="blore"><a href="#">Bangalore</a>
            <ul>
                <li data-city-value="delhi"><a href="#">Delhi</a></li>
                <li data-city-value="che"><a href="#">Chennai</a></li>
                <li data-city-value="jaipur"><a href="#">Jaipur</a></li>
                <li data-city-value="hyd"><a href="#">Hyderabad</a></li>
                <li data-city-value="mum"><a href="#">Mumbai</a></li>
                <li data-city-value="pune"><a href="#">Pune</a></li>
            </ul>
        </li>
    </ul>

它警告“空”

方法2）

它警告“未定义”

方法3）

它警告“未定义”

我检查了语法以获取数据值

如果你能帮我找到我犯的错误，那将是非常有帮助的

---

谢谢。：）

在前两种方法中，您的目标是id

navBar

的顶级

ul

。在第三种方法中，您执行

$（this）.parent（）

，它再次将您带到

ul

元素

该元素没有

数据城市值

属性

jquery方法应该是

$('#navBar').on('click','li', function(e) {
    var city = $(this).data('city-value');
    alert(city);
    return false;
});

---

演示在

这是如何迭代您的数据城市值属性：

 $('li[data-city-value]').each(function(index,element){
        alert($(element).data('city-value'));
 });

你也可以看看我的例子

单击事件：

$(document).ready(function()
{

    $('li').click(function() {
        alert($(this).data('city-value'));
        return false;
    });
});

您应该返回false，因为顶部li元素具有内部元素，并且它正在触发内部li元素单击事件

---

我的第二个演示。

正如Gaby所指出的，您需要到达

元素的第一步。试试这个：

$('#navBar:first-child')

---

您通过ID获取的元素上不存在该属性，因此它自然不会提供您想要的值。您是否试图在用户单击锚定或所有值时获取该值？在方法1和2中，您试图获取ul元素的

数据城市值，而不是li和您的
没有
数据城市值
。您需要选择一个特定的li元素。在方法3中，$（..）.data（..）方法与
data-
之后的属性名称一起使用，即需要使用
$（this）.data（'city-value'）
（不转换为camelCase）。$（this）.parent（）在集合中使用，即尝试将UL元素的数据值设置为li元素的数据城市值。但由于这是一个嵌套列表，我只需修改您的代码，就在警报下方（或代替）-
$（e.delegateTarget）.data（'value'，city）
 $('li[data-city-value]').each(function(index,element){
        alert($(element).data('city-value'));
 });

$(document).ready(function()
{

    $('li').click(function() {
        alert($(this).data('city-value'));
        return false;
    });
});

$('#navBar:first-child')