How to get the closest previous element in jQuery?

Question

I want to get the closest object tag from the currently selected object tag. But it has to be strictly above. Suppose I have the object with id A . How can I get the closest object tag above it? In this case I want to get the object tag with id B . Each div container can contain a object tag or something else.

<div class="message">
    <span></span>
</div>
<div class="message">
    <object id="C"></object>
</div>
<div class="message">
    <object id="B"></object>
</div>
<div class="message">
    <span></span>
</div>
<div class="message">
    <object id="A"></object>
</div>
<div class="message">
    <object id="Z"></object>
</div>

Answer 1

Assuming this is the object with ID A

$(this).closest('.message').prevUntil('.message:has(object)').prev().find('object');

FIDDLE

traverses up to the closest .message then checks previous elements until it finds one that contains an object tag, then it stops, but it stops at the element before that tag, so we call prev to go one step further, and then use find to find the object tag.

Answer 2

You can use prev() to get the previous sibling element. That will get you partway there, but since each 'message' div is not guaranteed to contain an object element you'll need to use prevUntil() or run your own iteration/search.

For instance:

var lastObj = $("#A");
var parent = lastObj.parent();
var previousObject = parent.prevUntil(".message:has(object)").prev().find("object");

Or without prevUntil() :

var lastObj = $("#A");
var parent = lastObj.parent();
var previousObject = undefined;
while (parent.length > 0 && ! previousObject) {
    parent = parent.prev();
    if (parent.find("object").length > 0) {
        previousObject = parent.find("object");
    }
}

Or as a runnable code snippet (using classes instead of object tags):

 $(".object").click(function(){ var myId = this.id; var prevId = undefined; var parent = $(this).parent(); var previousObject = undefined; while (parent.length > 0 && ! previousObject) { parent = parent.prev(); if (parent.find(".object").length > 0) { previousObject = parent.find(".object"); prevId = previousObject.attr("id"); } } alert("clicked=" + myId + ", previous=" + prevId); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="message"> <span></span> </div> <div class="message"> <span class="object" id="C">C</object> </div> <div class="message"> <span class="object" id="B">B</object> </div> <div class="message"> <span></span> </div> <div class="message"> <span class="object" id="A">A</object> </div> <div class="message"> <span class="object" id="Z">Z</object> </div> 

Answer 3

Another option:

var objs=$('object').toArray();
$('.message').on('click',function(){
    var elem=$(this).children().get(0);
    if(objs.indexOf(elem)-1>=0){
        console.log(objs[objs.indexOf(elem)-1]);
        console.log(objs[objs.indexOf(elem)-1].id);
    }
});