Find closest previous element jQuery

Question

I am wanting something similar to this person, except the element I want to match might not be a direct sibling.

If I had this HTML, for example,

<h3>     <span>         <b>Whaddup?</b>     </span> </h3> <h3>     <span>         <b>Hello</b>     </span> </h3> <div>     <div>         <img />     </div>      <span id="me"></span> </div> <h3>     <span>         <b>Goodbye</b>     </span> </h3> 

I would want to be able to do something like this:

var link = $("#me").closestPreviousElement("h3 span b"); console.log(link.text()); //"Hello" 

Is there an easy way to do this in jQuery?

EDIT: I should have made my specification a little bit clearer. $("#me") may or may not have a parent div. The code should not assume that it does. I don't necessarily know anything about the surrounding elements.

Answer 1

var link = $("#me").closest(":has(h3 span b)").find('h3 span b'); 

Example: http://jsfiddle.net/e27r8/

This uses the closest()^[docs] method to get the first ancestor that has a nested h3 span b, then does a .find().

Of course you could have multiple matches.

---

Otherwise, you're looking at doing a more direct traversal.

var link = $("#me").closest("h3 + div").prev().find('span b'); 

edit: This one works with your updated HTML.

Example: http://jsfiddle.net/e27r8/2/

---

EDIT: Updated to deal with updated question.

var link = $("#me").closest("h3 + *").prev().find('span b'); 

This makes the targeted element for .closest() generic, so that even if there is no parent, it will still work.

Example: http://jsfiddle.net/e27r8/4/

Answer 2

see http://api.jquery.com/prev/

var link = $("#me").parent("div").prev("h3").find("b"); alert(link.text()); 

see http://jsfiddle.net/gBwLq/