jQuery仅选中首个类元素问题：如何让所有符合条件input触发弹窗

你的问题根源在于直接调用$(".saninput").val()只会返回匹配到的第一个元素的值，而且整个逻辑没有遍历所有符合条件的元素，所以只有第一个输入框能触发弹窗。要让所有非空的.saninput都生效，我们需要遍历每个元素并单独判断，具体修改方法如下：

修改后的jQuery代码 #

$(document).ready(function() {
  // 遍历所有class为saninput的元素
  $(".saninput").each(function() {
    // 这里的$(this)指向当前遍历到的单个元素
    if ($(this).val() !== "") {
      var animal = $(this).data("animal");
      alert(animal);
    }
  });
});

关键改动说明 #

• 使用.each()方法遍历所有.saninput元素，确保每个元素都被检查
• 用$(this)替代全局的$(".saninput")，这样每次操作的都是当前遍历到的单个输入框
• 保持值非空的判断逻辑，只对有内容的元素触发弹窗

测试效果 #

当页面加载完成后，三个非空的输入框会依次弹出对应的data-animal值：sheep、cow、dog。

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