如何在动态创建元素上使用next、nextAll、find？nextAll失效问题

我来帮你排查这个问题，先理清核心原因，再给出靠谱的解决方案：

问题分析 #

你用事件委托绑定change事件的思路是完全正确的，这能确保动态创建的select也能触发事件。但nextAll()失效，大概率是这两个原因之一：

1. 动态元素的DOM位置不对：新创建的select没有被放到当前select的同一个父级元素的后续位置，导致nextAll()找不到它们（毕竟nextAll()只找当前元素的同级后续元素）。
2. nextAll()的匹配范围太宽泛：没指定具体选择器，可能误匹配了其他非select的同级元素，或者因为DOM结构的小变动导致匹配失败。

解决方案 #

第一步：确保动态元素的插入位置正确

你动态创建select的时候，一定要把它追加到当前所有select所在的那个<div>的末尾，比如用这样的代码：

// 示例：动态创建并添加select到正确的位置
const newSelectId = Math.floor(Math.random() * 1000);
$('#templates-block > div').append(`
  <select class="select-template" id="select-template-${newSelectId}"></select>
`);

这样新的select才会成为现有select的同级后续元素，nextAll()才有机会找到它们。

第二步：优化事件处理代码

给nextAll()加上明确的选择器，精准匹配后续的select元素，避免不必要的匹配：

$('#templates-block').on('change', '.select-template', function () {
  // 只查找当前元素之后的所有.select-template元素并隐藏
  $(this).nextAll('.select-template').hide();
});

备选方案：用索引筛选更稳定

如果还是有问题，咱们可以换一种思路——通过元素在父级中的索引来筛选后续元素，这种方式不受DOM插入细节的影响，更可靠：

$('#templates-block').on('change', '.select-template', function () {
  const $current = $(this);
  // 获取当前select在父级所有.select-template中的索引
  const currentIndex = $current.index('.select-template');
  // 筛选出索引大于当前值的select并隐藏
  $current.parent()
          .find('.select-template')
          .filter((idx) => idx > currentIndex)
          .hide();
});

快速验证方法 #

你可以在事件处理函数里加一行调试代码，看看能不能找到后续元素：

console.log($(this).nextAll('.select-template').length);

如果输出的数字大于0，说明元素能被找到，隐藏逻辑肯定能生效；如果输出0，那就要检查动态元素的插入位置是不是错了。

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