选择最近的 class 不是 parent

Question

我正在尝试 select 使用 jquery/javascript 的已点击项目的 header 文本。考虑到单击的项目不是 header 部分的后代，我在编写正确的 selectors 时遇到了问题。例如，如果我单击 item3.1，我希望它 return 文本 "Header 3"。

<section class="mainclass">
  <section class="header">Header 1</section>
  <ul>  
    <li>item1.1</li>
    <li>item1.2</li>
    <li>item1.3</li>
  </ul>
 <section class="header">Header 2</section>
 <ul>  
   <li>item2.1</li>
   <li>item2.2</li>
   <li>item2.3</li>
 </ul>
 <section class="header">Header 3</section>
 <ul>  
   <li>item3.1</li>
   <li>item3.2</li>
   <li>item3.3</li>
 </ul>
 <section class="header">Header 4</section>
</section>

当前代码示例：

jQuery('body').on('click','li',function(e) {
if (jQuery(this).parent('header').length <= 0){
    alert(jQuery(this).closest('mainclass').find('header').text());
}
});

此代码示例 return 所有 header。我无法让它与 closest、parents、find 等

的变体一起使用

Answer 1

使用.prev() 获取选择前的元素。所以向上移动到 <ul>，然后返回一个元素得到 header。此外，您需要 . 来匹配 class.

jQuery('body').on('click', 'li', function(e) {
    console.log(jQuery(this).closest('ul').prev('.header').text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="mainclass">
  <section class="header">Header 1</section>
  <ul>
    <li>item1.1</li>
    <li>item1.2</li>
    <li>item1.3</li>
  </ul>
  <section class="header">Header 2</section>
  <ul>
    <li>item2.1</li>
    <li>item2.2</li>
    <li>item2.3</li>
  </ul>
  <section class="header">Header 3</section>
  <ul>
    <li>item3.1</li>
    <li>item3.2</li>
    <li>item3.3</li>
  </ul>
  <section class="header">Header 4</section>
</section>

选择最近的 class 不是 parent

Selecting nearest class that isn't a parent

javascript

jquery

jquery-selectors