how to get the id of adjacent element

Let say i have a handler wh开发者_高级运维ich uses to place between two elements OR just fill the space between two elements. So my question is how to get the both element id or class which is just adjacent the both side of handler.

ex.:

 #horizontal_handler { width:100%; height:5px; background:url('../pick.png')  }
 #vertical_handler { width:5px; height:100%; background:url('../pick.png')  }

Here i have two handler and i am just placing between two div elements and here how can i get the id of these both div elements.

<div id="top"></div>
<div id="horizontal_handler"></div>
<div id="bottom"> </div>

the expected result should be : top, bottom

<div id="left"></div>
<div id="vertical_handler"></div>
<div id="right"> </div>

expected result should be : left, right

$('#vartical_handler').prev().attr('id');
$('#vartical_handler').next().attr('id');

REUSABLE Function:

function adjacentElementId(ref) {
    var arr = new Array;
    arr.push({
        'prevId': $(ref).prev().attr('id'),
        'nextId': $(ref).next().attr('id')
    });
    return arr;
}
var arrId = adjacentElementId('#vertical_handler').pop(); // Here you have just send the jquery reference. e.g. `'#vertical_handler'` here
console.log(arrId.prevId);
console.log(arrId.nextId);

You can refer to the .index() entry in the jquery api page: http://api.jquery.com/index/

The solution would be:

var i = $('#vertical_handler').index();
$('div').get(i - 1).attr('id');
$('div').get(i + 1).attr('id');