javascript - 选择最近的非父类

Question

我正在尝试使用 jquery/javascript 为单击的项目选择标题文本。鉴于单击的项目不是标题部分的后代，我在编写正确的选择器时遇到了问题。例如，如果我单击 item3.1，我希望它返回文本“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());
}
});

此代码示例返回所有 header 。我无法让它与 closest、parents、find 等变体一起使用。

Answer 1

使用 .prev()在选择之前获取元素。所以去 <ul> ，然后返回一个元素以获取标题。另外，你需要一个 .匹配一个类。

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>