如何判断目标元素是否为其类的首个元素并执行对应操作

针对你这个需求——判断选中的.team下拉框是不是该类的第一个元素，还要适配动态添加的场景，我整理了两种实用的实现方案，都是经过验证的：

核心思路 #

不管是原生JS还是jQuery，核心逻辑都是：

1. 拿到页面上所有.team元素的集合
2. 对比当前触发事件的元素在集合里的位置，看是不是第一个（索引为0，或者用选择器直接匹配首个元素）
3. 因为元素是动态添加的，必须用事件委托绑定事件，不然新添加的元素不会响应事件

方案一：原生JavaScript实现 #

如果你的项目没用到jQuery，用原生JS完全能搞定，代码也不复杂：

// 找到父容器，给它绑定事件委托，监听所有.team元素的change事件（可以换成你需要的事件，比如click）
document.querySelector('#include-fields').addEventListener('change', function(e) {
  // 先确认触发事件的是.team元素
  if (e.target.classList.contains('team')) {
    // 获取所有.team元素的集合，转成数组方便用indexOf
    const allTeams = Array.from(document.querySelectorAll('.team'));
    // 拿到当前元素在数组里的索引
    const currentPos = allTeams.indexOf(e.target);
    
    if (currentPos === 0) {
      // 是第一个元素时的操作，比如提示或者执行特定逻辑
      console.log('这是第一个team下拉框，不能删除哦！');
    } else {
      // 非首个元素的操作，比如允许删除或者其他业务逻辑
      console.log('这不是第一个，可以正常操作');
    }
  }
});

方案二：jQuery实现（更简洁） #

如果你的项目已经引入了jQuery，那代码会更清爽，jQuery的选择器和事件委托语法很友好：

// 给父容器绑定事件委托，监听所有动态添加的.team元素的change事件
$('#include-fields').on('change', '.team', function() {
  // 直接用is()方法判断当前元素是不是第一个.team
  if ($(this).is('.team:first')) {
    alert('这是第一个team下拉框，执行对应操作！');
  } else {
    alert('不是第一个，执行其他操作！');
  }
});

额外扩展：删除场景的适配 #

如果你的需求是点击删除按钮时判断能不能删（比如第一个不能删），可以参考这个jQuery示例：

// 监听删除按钮的点击事件
$('#include-fields').on('click', '.delete-btn', function() {
  // 找到当前按钮对应的.team元素
  const $currentTeam = $(this).closest('.team');
  // 判断是不是第一个
  if ($currentTeam.is('.team:first')) {
    alert('第一个元素不能删除哦！');
    return; // 阻止后续删除操作
  }
  // 不是第一个就删除对应的行（假设每个select和checkbox在一个.row容器里）
  $currentTeam.closest('.row').remove();
});

关键注意点 #

• 一定要用事件委托：直接给.team绑定事件只会对页面初始存在的元素生效，动态添加的元素不会触发，所以必须绑定到父容器上。
• 索引判断要准确：原生JS里querySelectorAll返回的是NodeList，得转成数组才能用indexOf；jQuery的:first选择器直接就能定位到第一个匹配元素，很方便。

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