单击元素时，使用另一个类找到相对于该元素最近的元素并切换它

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