Question

点击列表项

时，我试图获得最接近的dropdown-header

<ul class="dropdown-menu">
  <li class="dropdown-header">Word 1</li>
  <li><a href="#">Click me 1</a></li>
  <li><a href="#">Click me 1</a></li>
  <li><a href="#">Click me 1</a></li>
  <li class="dropdown-header">Word 2</li>
  <li><a href="#">Click me 2</a></li>
  <li><a href="#">Click me 2</a></li>
  <li class="dropdown-header">Word 3</li>
  <li><a href="#">Click me 3</a></li>
</ul>

这不起作用，有人可以解释一下。谢谢

$('.dropdown-menu').on('click', 'a', function(e) {
          $(this).parent().parent().find('.dropdown-header').html(); //would return Word #
          e.preventDefault();
      });

Answer 1

在这种情况下，

closest()单独对你不起作用，因为它旨在搜索父母，而不是父母的兄弟姐妹。

要解决此问题，您可以使用closest()获取父li，然后使用prevAll()获取:first以获取您要查找的元素。试试这个：

$('.dropdown-menu').on('click', 'a', function(e) {
  e.preventDefault();
  var val = $(this).closest('li').prevAll('.dropdown-header:first').text();
  console.log(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu">
  <li class="dropdown-header">Word 1</li>
  <li><a href="#">Click me 1</a></li>
  <li><a href="#">Click me 1</a></li>
  <li><a href="#">Click me 1</a></li>
  <li class="dropdown-header">Word 2</li>
  <li><a href="#">Click me 2</a></li>
  <li><a href="#">Click me 2</a></li>
  <li class="dropdown-header">Word 3</li>
  <li><a href="#">Click me 3</a></li>
</ul>

Answer 2

您需要从锚点升级到列表项，然后使用dropdown-header类将列表向上移动到列表项。此外，。val()适用于表单元素，而不适用于列表项，因此您需要.html()或.text()。尝试：

var val = $(this).parent().prevAll('.dropdown-header').html();

$('.dropdown-menu').on('click', 'a', function(e) {
  var val = $(this).parent().prevAll('.dropdown-header').html(); //would return Word #
  console.log(val)
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu">
  <li class="dropdown-header">Word 1</li>
  <li><a href="#">Click me 1</a></li>
  <li><a href="#">Click me 1</a></li>
  <li><a href="#">Click me 1</a></li>
  <li class="dropdown-header">Word 2</li>
  <li><a href="#">Click me 2</a></li>
  <li><a href="#">Click me 2</a></li>
  <li class="dropdown-header">Word 3</li>
  <li><a href="#">Click me 3</a></li>
</ul>

jquery找到以前的类和返回值

2 个答案: