单击元素时，使用另一个类找到相对于此元素的最近元素并将其切换为

Question

我在这里遗漏了一些东西。单击类one的行时，我只想找到类two的最近的行，然后切换（显示/隐藏）它。

$(".one").on('click', function() {
   $(this).find('.two').toggle(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class="one">
        <td> Hello </td>
    </tr>
     <tr>
        <td> world </td>
    </tr>
    <tr class="two">
        <td> Foo </td>
    </tr>
    <tr class="two">
        <td> Bar </td>
    </tr>    
</table>

Answer 1

这样的事情：

$(".one").on('click', function() {
    $(this).nextAll('.two:first').toggle(); 
});

http://jsfiddle.net/DerekL/5ossufmj/

Answer 2

我想你可能想要.next()。它找到DOM中的下一个兄弟，尊重DOM中的位置。

https://api.jquery.com/next/

或者这可能是：get the next element with a specific class after a specific element

修改

Here是一个有效的解决方案：

$('.one').on('click', function () {
    var this_el = $(this);
    var el = findNextWithClass(this_el, "two");
    if (el != null)
    {
        el.toggle();
    }
    else
    {
        alert("null");
    }
});

function findNextWithClass(element, className) {
    var next = element.next();
    if (next.hasClass(className)) {
        return next
    } else {
        if (next != null) {
            return findNextWithClass(next, className);
        } else {
            return null;
        }
    }
}