Selecting parent's next sibling's children in jQuery

Question

This is an illustration of a part of my DOM:

I want to trigger an effect on div with class des (which is in an odd div) on click event of div with class but (which is in the previous even div)

How can I select des from but?

Answer 1

Trivially, if this is the clicked .but element:

$(this).parent().next().children('.des')

This does assume that there are no other elements in the way, i.e. that the .even and .odd elements are immediate siblings, and that .but and .des are immediately children of their respective .even and .odd ancestors.

Less efficiently, but guaranteed to work with any arbitrary number of additional (non-matching) elements in the tree would be:

$(this).closest('.even').nextAll('.odd').first().find('.des')

Answer 2

It depends on your markup. Something like this should work, though:

$('.but').on('click', function () {
  $(this).closest('.even').next().find('.des');
});