jQuery中获取动态元素下一个元素ID返回undefined的问题

我来帮你拆解一下你遇到的两个问题，以及对应的解决方案：

问题1：点击.btn时ss返回undefined #

你的代码里有两个关键错误：

1. jQuery选择器缺少ID前缀：你拿到的level是元素的ID字符串（比如"1"），但jQuery通过ID选择元素需要加上#前缀，直接用$(level)会被当成标签选择器，自然找不到目标元素。
2. DOM结构导致next()选中的是<br>：你的每个.btn图片后面紧跟着<br>标签，所以next()获取到的是这个换行元素，而不是下一个.btn——换行元素没有ID，所以返回undefined。

修正后的代码：

$(document).ready(function(){ 
  $(".btn").click(function(){ 
    var level= $(this).attr('id'); 
    alert(level); 
    // 1. 给ID加上#前缀；2. 使用nextAll()精准定位下一个.btn元素
    var ss= $('#'+level).nextAll('.btn').first().attr('id'); 
    alert(ss); 
  }); 
}); 

如果你确定DOM结构固定是img -> br -> img，也可以用$('#'+level).next().next().attr('id')，不过nextAll('.btn').first()更灵活，不管中间有多少其他元素都能找到下一个目标按钮。

问题2：全局变量level无法正确获取下一个元素ID #

这个问题的核心是代码执行时机错误：你在页面加载时就执行了var ss= $(level).next().attr('id');，但此时level还没有被赋值（点击事件是用户触发后才会给level赋值），所以$(level)等价于$(undefined)，自然返回undefined。

你需要把获取ss的代码放到点击事件内部，确保是在level被赋值后再执行：

var level; // 全局变量
$(".button").click(function () { 
  level = $(this).attr("id"); 
  alert(level); // 正常工作
  // 把获取ss的代码移到这里，确保level已经有值
  var ss= $('#'+level).nextAll('.btn').first().attr('id'); 
  alert(ss);
}); 

另外补充一点：HTML里的ID最好不要以纯数字开头（虽然现在浏览器大多支持，但不符合W3C规范），建议给ID加上前缀，比如btn-1、btn-2，这样更规范。

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