When element clicked, find closest element relative to this element with another class and toggle it

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>

if it is peer to your clickable element you can use `.siblings()` instead of `.find()` https://api.jquery.com/siblings/ - or a different method like `parents` or `closest` or `next` depending on what you want. https://api.jquery.com/category/traversing/tree-traversal/ — lemieuxster, Jul 08 '15 at 23:30

Derek 朕會功夫 · Accepted Answer · 2015-07-09T00:06:42.777

3

Something like this:

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

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

edited Jul 09 '15 at 00:06

answered Jul 08 '15 at 23:30

Derek 朕會功夫

92,235
44
185
247

Your solution works immediately for this case. But what I am trying to apply it to: I want to get the next element with that `two` class relative to the position of the element I clicked. When I apply your answer, It always returns the first element with class of `two`, ignoring the position of the element I clicked. Does that make sense? – Neil Jul 08 '15 at 23:54
1

@Neil By "position" do you mean the position in your code or its actual position on the screen? – Derek 朕會功夫 Jul 08 '15 at 23:58
The next `` element with the class of `two` relative to the element I clicked. I'm not sure what you mean by position of code or screen. I think screen, because I am using bootstrap for responsive design, so screen may change. – Neil Jul 08 '15 at 23:59
1

@Neil I see. This is probably what you wanted, [demo](http://jsfiddle.net/DerekL/5ossufmj/). – Derek 朕會功夫 Jul 09 '15 at 00:02

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

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

edited May 23 '17 at 12:21

Community

1
1

answered Jul 08 '15 at 23:33

abalter

9,663
17
90
145

That is a horrible way of testing classes, and if there's no next sibling with such class, then your code will fail because `null` doesn't have the `.toggle` property... – Derek 朕會功夫 Jul 09 '15 at 04:54
I see your point. I need to catch that condition. I put an if then in the click method. – abalter Jul 09 '15 at 14:17
BTW, why is that a "horrible" way of testing classes. An educational moment for me... – abalter Jul 09 '15 at 14:27
Let say if the element has two classes, `two item`, then your code will fail silently. You probably want to use `.hasClass` in jQuery instead. – Derek 朕會功夫 Jul 09 '15 at 14:32
That makes a lot of sense. I'll edit the answer again. – abalter Jul 09 '15 at 14:37

When element clicked, find closest element relative to this element with another class and toggle it

2 Answers2