jquery查找上一个类并返回值答案

【问题标题】：jquery find previous class and return valuejquery查找上一个类并返回值
【发布时间】：2016-11-04 21:12:04
【问题描述】：

单击列表项时，我试图获得最接近的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();
      });

【问题讨论】：

stackoverflow.com/questions/2310270/…

标签： jquery

【解决方案1】：

您需要从锚点上升到列表项，然后将列表上升到具有下拉标题类的列表项。此外，.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>

【讨论】：

【解决方案2】：

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>

【讨论】：

这是必要的，因为prevAll() 可能会找到 3 个元素并显示每个元素的连接文本