从先前的所有元素中按类查找最接近的元素

时间:2014-07-18 07:55:44

标签: javascript jquery html

这是我的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,那么文字&#39;标题1&#39;应该提醒,如果点击了选项4,那么文本&#39;标题2&#39;应该提醒。请告诉jquery函数执行此操作。

3 个答案:

答案 0 :(得分:7)

使用.prevAll()选择与选择器匹配的前一个兄弟姐妹。

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

答案 1 :(得分:1)

使用.prevAll()

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

JSFiddle here.

答案 2 :(得分:0)

尝试

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