Question

Html:

<div class="ancestor">
  <div class="sibling"><input class="findMe" /></div>
  <button>find findMe</button>
</div>

or (input is direct sibling)

<input class="findMe" />
<button>find findMe</button>

Is there a way to find the .findMe if the button is clicked? Basically, something that will check ancestors, previous siblings (second snippet), and children within siblings (first snippet).

Js:

$("button").click(function(){
  var btn = $(this);
  // what I'm after...
  var input = btn.findSomethingThatExistsAnywhereAboveMe(".findMe") 
});

Answer 1

Not with the code you have provided.

How is the script supposed to know you mean that specific .findMe element, you could have any number of those elements within the same document.

However, if you have a parent element around this markup, then you could find that specific .findMe.

<div class="parentElement">
  <div class="ancestor">
    <input class="findMe" />
  </div>
  <button>find findMe</button>
</div>

Or

<div class="parentElement">
  <input class="findMe" />
  <button>find findMe</button>
</div>

Then you could do:

$("button").click(function(){
  var btn = $(this);
  var input = btn.parents(".parentElement").find(".findMe");
});