jQuery获取同级div的前后ID

在 jQuery 中，可通过 `prev()` 获取前一个同级元素，用 `next()` 获取后一个同级元素，而获取元素的 ID 属性则需调用 `attr(id)`。下文将结合具体示例详细说明这三种常用方法的使用方式。

1、 新建名为test.html的HTML文件，演示如何使用jQuery获取当前div同级的上一个和下一个div元素的ID值。

2、 在test.html中，用一个div容器包裹三个嵌套的div子模块。

3、 在test.html中，为三个内部div元素分别添加id属性，值依次设为aa、bb和cc。

4、 在test.html中，用button标签创建两个按钮，文字内容均为取上一个div的id。

5、 在test.html中，为两个按钮分别设置onclick事件，点击第一个按钮时调用getupid()函数，点击第二个按钮时调用getdownid()函数。

6、 在JavaScript中，需定义两个函数：`getupid()` 和 `getdownid()`。前者用于获取指定元素的上一个同级元素的ID，后者用于获取下一个同级元素的ID。具体实现为：首先通过 `$$(bb)` 获取ID为bb的div元素；在 `getupid()` 中，调用 `prev()` 方法定位其前一个兄弟元素，再使用 `attr(id)` 提取该元素的ID属性值；在 `getdownid()` 中，则调用 `next()` 方法定位其后一个兄弟元素，并同样通过 `attr(id)` 获取其ID。两个函数均基于jQuery库编写，依赖于元素在DOM树中的兄弟节点关系，要求目标元素存在相邻的同级元素，否则将返回空或undefined。

7、 在浏览器中打开test.html，依次点击各按钮，观察对应功能效果。

8、 新建一个名为test.html的文件。