jQuery实现Div ID循环替换：点击Next按钮时upper1/2/3 ID轮换

没问题，我来帮你搞定这个循环交换ID的需求！下面直接给出完整的HTML、CSS和jQuery代码，每部分都有简单说明，方便你快速上手。

HTML 结构 #

首先是基础的页面结构，我们用三个div来展示ID变化（通过样式区分），再加一个触发点击的按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环交换ID示例</title>
    <!-- 引入jQuery，这里用CDN版本，你也可以换成本地文件 -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="upper1" class="box">元素1（初始ID：upper1）</div>
    <div id="upper2" class="box">元素2（初始ID：upper2）</div>
    <div id="upper3" class="box">元素3（初始ID：upper3）</div>
    <button id="next">点击交换ID</button>
</body>
</html>

CSS 样式 #

给不同ID的元素设置不同背景色，这样点击按钮时能直观看到ID的变化（样式跟着ID走）：

.box {
    width: 200px;
    height: 80px;
    margin: 10px 0;
    padding: 10px;
    color: white;
    font-size: 16px;
    line-height: 80px;
    text-align: center;
}

#upper1 {
    background-color: #2c3e50;
}

#upper2 {
    background-color: #3498db;
}

#upper3 {
    background-color: #e74c3c;
}

#next {
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
}

jQuery 核心逻辑 #

关键在于点击按钮时，先把三个元素的当前ID全部保存下来，再按顺序重新分配——避免中途修改ID后找不到目标元素：

$(document).ready(function() {
    $('#next').click(function() {
        // 先获取三个元素的当前ID，必须先存好再修改！
        const $el1 = $('#upper1');
        const $el2 = $('#upper2');
        const $el3 = $('#upper3');
        
        const id1 = $el1.attr('id');
        const id2 = $el2.attr('id');
        const id3 = $el3.attr('id');
        
        // 按要求循环分配新ID
        $el1.attr('id', id2);
        $el2.attr('id', id3);
        $el3.attr('id', id1);
        
        // 可选：控制台打印ID变化，方便调试
        console.log(`交换后：元素1ID=${$el1.attr('id')}，元素2ID=${$el2.attr('id')}，元素3ID=${$el3.attr('id')}`);
    });
});

小提示 #

• 如果你不需要控制台日志，可以删掉那行console代码；
• 要是你的元素不是div，换成p、span等标签也完全没问题，只要保证初始ID正确即可；
• 如果以后需要扩展到更多元素，可以把元素和ID存到数组里，用循环来处理，这样更灵活。

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