如何基于数组的前后元素值修改div的id属性（jQuery实现）

基础实现方案 #

因为目标div的id会动态修改，建议先给它加一个固定的类名用于稳定定位，修改后的HTML代码如下：

<button id="buttonOne"></button>
<div id="two" class="target-div"></div>
<button id="buttonTwo"></button>

对应的jQuery代码：

// 等待DOM加载完成后执行逻辑
$(function() {
  // 绑定第一个按钮的点击事件
  $('#buttonOne').click(function() {
    $('.target-div').attr('id', 'one');
  });

  // 绑定第二个按钮的点击事件
  $('#buttonTwo').click(function() {
    $('.target-div').attr('id', 'three');
  });
});

无需修改原有HTML的方案 #

如果不想调整现有HTML结构，可以通过元素相对位置定位目标div，代码如下：

$(function() {
  $('#buttonOne').click(function() {
    // 取当前按钮后面第一个div元素
    $(this).next('div').attr('id', 'one');
  });

  $('#buttonTwo').click(function() {
    // 取当前按钮前面第一个div元素
    $(this).prev('div').attr('id', 'three');
  });
});

常见失败原因排查 #

1. 页面未正确引入jQuery库就执行jQuery语法代码
2. 代码未包裹DOM加载完成的回调，元素还没渲染就绑定事件导致失效
3. 使用id选择器定位目标div，修改id后后续操作无法匹配到元素

内容的提问来源于stack exchange，提问作者tegs_terry