查找上一个按钮的ID

Question

I'm looking to find the id of the previous button. It is pretty far away - lots of table rows, tables, divs, etc. between the target and the button but I thought this would still work:

alert( $(this).prevAll("input[type=button]").attr('id') );

Unfortunately this returns alerts 'undefined'. Help?

Answer 1

That kind of lookup might be expensive. What about doing a select for all your input[type=button] elements, and traversing that array until you find the element matching your id. Then you can simply reference the array index - 1 to get your answer.

Answer 2

function getPrevInput(elem){
    var i = 0,
        inputs = document.getElementsByTagName('input'),
        ret = 'Not found';
    while(inputs[i] !== elem || i >= inputs.length){
        if(inputs[i].type === 'button'){
            ret = inputs[i];
        }
        i++;
    }
    return (typeof ret === 'string') ? ret : ret.id;
}

That probably isn't the most efficient solution, but it's the only one I can think of. What it does is goes through all the input elements and finds the one right before the one you passed into the function. You can use it like this, assuming you're calling it correctly and this is the input element:

getPrevInput(this);

Demo

Answer 3

Is the previous button a sibling of the current button? If not, prevAll() won't work. The description of prevAll() :

Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

Depending on your DOM structure, you can use a combination of parents() and then followed by find() .

Answer 4

This function looks up all input[type=button] elements and uses the jQuery index function to find your current element in this group. If it could be found and there is a previous element it is returned.

$.fn.previousElem = function(lookup){
    var $elements = $(lookup),
        index = $elements.index(this);
    if(index > 0){
       return $elements.eq(index-1)
    }else{
      return this;
    }
}

HTML:

<div><div><div><div>
    <input type=button id=1 value=1 />
</div></div></div></div>

<div><div><div><div>
    <input type=button id=2 value=2 />
</div></div></div></div>

JS:

alert ($("#2").previousElem('input[type=button]').attr('id'))

http://jsfiddle.net/SnScQ/1/

Answer 5

Here's a different version of Amaan's code, but jqueryfied and his solution wasn't looking for a button. The key to the solution is that jQuery returns the elements in document order, as do document.getElementsByTagName and similar functions.

var button = $('#c');
var prevNode;
$("input[type=button]").each(function() {
    if (this == button[0]) {
      return false;
    }
    prevNode = this;
});
alert(prevNode && prevNode.getAttribute('id'));

http://jsfiddle.net/crFy6/

Answer 6

have you tried .closest? ...

alert( $(this).closest("input[type=button]").attr('id') );