Javascript 从以前的所有元素中按类查找最近的元素

这是我的html

<ul>
    <li class='header_1 header_class'>Header 1</li>
    <li class='ooption_1 option_class'>OPTION 1</li>
    <li class='ooption_2 option_class'>OPTION 2</li>
    <li class='ooption_3 option_class'>OPTION 3</li>
    <li class='header_2 header_class'>Header 2</li>
    <li class='ooption_4 option_class'>OPTION 4</li>
    <li class='ooption_5 option_class'>OPTION 5</li>
    <li class='ooption_6 option_class'>OPTION 6</li>
    <li class='header_3 header_class'>Header 3</li>
    <li class='ooption_7 option_class'>OPTION 7</li>
    <li class='ooption_8 option_class'>OPTION 8</li>
    <li class='ooption_9 option_class'>OPTION 9</li>
</ul>

如果单击选项1，则应通知文本“标题1”，如果单击选项4，则应通知文本“标题2”。请告诉jquery函数执行此操作。

使用.prevAll选择与选择器匹配的前一个同级

alert($(this).prevAll(".header_class").first().text());

使用

试一试

---

你能展示一下你到现在为止所做的，把它放在JSFIDLE里。你被困在哪里了？jQuery的文档非常丰富。我尝试过，但无法获得的jQuery函数this@Rex告诉我们您有什么triedIt最好将选项作为标题的子项。然后使用CSS设置您想要的外观。效果很好

jQuery('.option_class').click(function () {
    var theText = jQuery(this).prevAll('.header_class').first().text();
    alert(theText);
});

$(function() {
  $('li[class^=ooption]').on('click', function() {
    console.log( $(this).prevAll('.header_class').eq(0).text() );
  });
});