Question

我有这个ul li html元素：

 <ul id="langMenu" class="top-links list-inline">
                        <li>
                            <a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#"><img class="flag-lang" src="~/assets/images/flags/no.png" width="16" height="11" alt="lang" />NORSK</a>
                            <ul class="dropdown-langs dropdown-menu">
                                <li><a value="no" tabindex="-1"><img class="flag-lang" src="~/assets/images/flags/no.png" width="16" height="11" alt="lang" />NORSK</a></li>
                                <li class="divider"></li>
                                <li><a value="us" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/us.png" width="16" height="11" alt="lang" /> ENGLISH</a></li>
                                <li><a value="de" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/de.png" width="16" height="11" alt="lang" /> GERMAN</a></li>

                            </ul>
                        </li>
                    </ul>

当我实现选择时，我需要确定所选元素的值。

例如：

如果用户选择了英语，我需要从锚点获取 en 值。如果用户选择了Norsk，我需要从锚点获得 no 值。

如何使用jquery从嵌套在li元素中的anchor元素获取值？

Answer 1

据我所知，你可以这样做：

$('a').click(function(event){
console.log($this).attr('value');
event.preventDefault();
});

Answer 2

此代码将使用link的值，但仅限于langMenu嵌套ul li

内的链接

＆＃13;

$('#langMenu ul li').click(function() {
  console.log($(this).find('a').attr("value"))
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="langMenu" class="top-links list-inline">
  <li>
    <a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#"><img class="flag-lang" src="~/assets/images/flags/no.png" width="16" height="11" alt="lang" />NORSK</a>
    <ul class="dropdown-langs dropdown-menu">
      <li>
        <a value="no" tabindex="-1"><img class="flag-lang" src="~/assets/images/flags/no.png" width="16" height="11" alt="lang" />NORSK</a>
      </li>
      <li class="divider"></li>
      <li>
        <a value="us" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/us.png" width="16" height="11" alt="lang" /> ENGLISH</a>
      </li>
      <li>
        <a value="de" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/de.png" width="16" height="11" alt="lang" /> GERMAN</a>
      </li>

    </ul>
  </li>
</ul>

＆＃13;

Answer 3

您可以为<li>元素添加点击事件监听器，并搜索子锚元素<a>。

$('.dropdown-langs li').on('click', function () {
  var value = $(this).children('a').attr('value');
  console.log(value)
});

此外，您应该使用数据值而不仅仅是值。

data-*

data- *属性使我们能够在所有HTML元素上嵌入自定义数据属性。

JQuery有一种检索数据值的特定方法。

  var value = $(this).children('a').data('value');

如何从嵌套在li元素中的anchor元素获取值

3 个答案:

data-*