如何获取相邻元素的id

Question

假设我有一个处理程序，用于放置在两个元素之间或只是填充两个元素之间的空间。所以我的问题是如何获取与处理程序两侧相邻的两个元素 id 或类。

例如：

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

这里我有两个处理程序，我只是放置在两个 div 元素之间，这里如何获取这两个 div 元素的 id。

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

预期结果应为：顶部、底部

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

预期结果应为：左侧、右侧

Answer 1

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

可重复使用功能：

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);

Answer 2

您可以参考 jquery api 页面中的 .index() 条目： http://api.jquery.com/ index/

解决方案是：

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