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

Question

I am missing something here. When the row with the class one is clicked, I want to find only the closest row with the class two and then toggle (show/hide) it.

 $(".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

Something like this:

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

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

Answer 2

I think you might want .next() . It finds the next sibling in the DOM respecting placement in the DOM.

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

Or maybe this: get the next element with a specific class after a specific element

Edit

Here is a working solution:

$('.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;
        }
    }
}