Click element up the dom with jQuery

Question

I have a menu and I want an element with a class of active, parent element's sibling element to be clicked automatically on page load.

Here is my HTML:

<li class="level1">
  <span class="level1 drop-down clicked"><a href="#" class="level1">Oranges</a></span>
  <ul class="level2" style="display: block;">
    <li class="level2"><a href="#" class="level1">Peel</a></li>
    <li class="level2"><a href="#" class="level1">Pips</a></li>
    <li class="level2 active"><a href="#" class="level1">Pegs</a></li>
  </ul>
</li>

I've tried

jQuery('li.level2.active').parent('li.level1').children('span.level1.drop-down').click();

but it does not work. I'm not sure if I'm using the parent & children method's properly.

Although, jQuery("span.drop-down.level1").click(); does work, but it selects all the elements with that class which I would like to avoid.

Answer 1

尝试这个：

jQuery('li.active').closest('li.level1').find('span.level1.drop-down').trigger('click');

Answer 2

Because the li.level1 is two steps up, you need .parents() , which selects up multiple levels, instead of .parent() , which is only one.

jQuery('li.level2.active').parents('li.level1').children('span.level1.drop-down').click();
                                ^^^^