如何获取 div 值的父值

Question

我有 html 代码：

<div class="top-menu">
  <div class="dropdown dropdown-inline">
    <a class="btn btn-primary dropdown-toggle" id="info" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false" >INFO</a>
  </div>
  <div class="dropdown dropdown-inline">
    <a class="btn btn-primary dropdown-toggle" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">MAINITEM <span class="carot"></span></a>
    <ul class="dropdown-menu dropdownhover-bottom" role="menu">
      <li><a>A</a></li>
      <li><a>B</a></li>
      <li><a>C</a></li>
    </ul>
  </div>

我需要在单击 li 元素（A、B 或 C）时获取 MAINITEM 的值。我在页面上有大约 10 个主要项目，需要获得这个 MAINITEM 的价值。

我尝试使用：

$("a.btn.btn-primary.dropdown-toggle, ul.dropdown-menu.dropdownhover-bottom li a").on('click', function () {
  alert($(this).closest('.dropdown-toggle').find('a').text());
})

但是我得到的结果是空的。

Answer 1

使用这个

http://jsfiddle.net/o90wnmuL/

 jQuery(".dropdown li a").click(function(){
   text =  jQuery(this).closest(".dropdown").find(".dropdown-toggle").text();
   console.log(text)
});

Answer 2

jQuery.closest() 函数仅过滤 parent 个元素。由于您要组合两个不同的选择器，因此您应该对两个目标元素都使用 common parent 。在您的情况下，常见的 parent 是 .dropdown.

此外，您需要确保通过正确的 a 元素进行过滤，因为 .dropdown 可以有很多锚标记。在您的情况下，您可以使用 a.btn.

下面是一个工作示例，其中包含上面建议的更改。

$("a.btn.btn-primary.dropdown-toggle, ul.dropdown-menu.dropdownhover-bottom li a").on('click', function(e) {
  alert($(this).closest('.dropdown').find('a.btn').text());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="top-menu">
  <div class="dropdown dropdown-inline">
    <a class="btn btn-primary dropdown-toggle" id="info" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">INFO</a>
  </div>
  <div class="dropdown dropdown-inline">
    <a class="btn btn-primary dropdown-toggle" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" aria-expanded="false">MAINITEM <span class="carot"></span></a>
    <ul class="dropdown-menu dropdownhover-bottom" role="menu">
      <li><a>A</a></li>
      <li><a>B</a></li>
      <li><a>C</a></li>
    </ul>
  </div>

如何获取 div 值的父值

How to get parent value of div a value

jquery

parent