How to select a preview selector in jquery

Question

I been trying various ways but I can't seem to get the right combinations. Heres the dom:

<!-- Main Blog Content -->
<div class="orbit-container row">
  <ul class="camp orbit-slides-container slide">
    <li></li>
    <li></li>
  </u>
  <a href="#" class="orbit-prev"><span></span></a>
  <a href="#" class="orbit-next"><span></span></a>
</div>

<div class="row">
  <div class="small-12 hide-for-medium-up columns text-center">
    <a class="nav-out outside-prev" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 20.9 36.1" enable-background="new 0 0 20.9 36.1" xml:space="preserve" class="svg replaced-svg">
        <g>
          <polygon fill="#2A2A2A" points="18,0 20.9,2.9 5.7,18 20.9,33.2 18,36.1 0,18  "></polygon>
        </g>
      </svg>
    </a>
    <a class="rotate-next nav-out" href="#" style="-webkit-transform: rotate(180deg);">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 20.9 36.1" enable-background="new 0 0 20.9 36.1" xml:space="preserve" class="svg replaced-svg">
        <g>
          <polygon fill="#2A2A2A" points="18,0 20.9,2.9 5.7,18 20.9,33.2 18,36.1 0,18  "></polygon>
        </g>
      </svg>
    </a>
  </div>
  <div class="small-12 medium-10 columns meta">
    <h2>Header</h2>
    <p>Filler text</p>
  </div>
  <div class="medium-1 columns">
    <a class="nav-out hide-for-small outside-prev" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 20.9 36.1" enable-background="new 0 0 20.9 36.1" xml:space="preserve" class="svg replaced-svg">
        <g>
          <polygon fill="#2A2A2A" points="18,0 20.9,2.9 5.7,18 20.9,33.2 18,36.1 0,18  "></polygon>
        </g>
      </svg>
    </a>
  </div>
  <div class="medium-1 columns">
    <a class="rotate-next nav-out hide-for-small outside-next" href="#" style="-webkit-transform: rotate(180deg);">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 20.9 36.1" enable-background="new 0 0 20.9 36.1" xml:space="preserve" class="svg replaced-svg">
        <g>
          <polygon fill="#2A2A2A" points="18,0 20.9,2.9 5.7,18 20.9,33.2 18,36.1 0,18  "></polygon>
        </g>
      </svg>
    </a>
  </div>
</div>

When I click on the next button in the .row > .medium-10 > a I need to click on the .full-width .orbit-container a.orbit-next

How can I do this?

I have multiple though and need to select the closet one otherwise all the action are the same

Answer 1

Try something like this:

 $(".row .medium-10 a").click(function(){

     $(this).closest(".orbit-container").find("a.orbit-next").click();

     // or 

     $(this).closest(".orbit-container").find("a.orbit-next").trigger("click");

});