Question

我尝试使用jquery / javascript为点击的项目选择标题文本。考虑到点击的项目不是标题部分的后代，我在编写正确的选择器时遇到了问题。例如，如果我单击item3.1，我希望它返回文本＆＃34;标题3＆＃34;。

<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());
}
});

此代码示例返回所有标头。我还没有能够使用最近，父母，寻找等的变种来实现这个目标。

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>

选择不是父母的最近的班级

1 个答案: