jquery - 向所有必需元素添加边框，但顶部滚动到第一个空元素

Question

在我的表单中，我向所有不能为空的元素添加了一个名为 required 的类。然后，我使用 $.each() 循环遍历每个元素，并添加一个名为 border 的类，该类将为所有这些元素应用 2px 红色边框。

var req = $('.required');
$.each(req, function(){
    var curr_val = $(this).val();
    if(! curr_val)
    {
      $(this).addClass('border');
    }
});

现在页面上有垂直滚动，因此当单击“提交”时，我希望页面向上滚动到第一个空元素，以便用户知道出了问题，这就是表单未提交的原因

我尝试过的

我在早期版本的代码中添加了此 block

$.each(req, function(){
    var curr_val = $(this).val();
    if(! curr_val)
    {
      $(this).addClass('border');
      $('html, body').animate({            // added for scrolling purposes
         scrollTop: $(this).offset().top
      }, 200);
    }
});

这可行，但问题是它将以每 0.2 秒的间隔不断滚动，直到到达最后一个空元素。对于用户来说，这看起来非常有趣且不受欢迎。

所以我想知道是否有办法让它滚动到第一个空元素并停在那里，即使它下面有更多的空元素。当该元素填满并再次单击“提交”时，再次滚动到第一个空元素并将其停在那里。

JS fiddle

这是一个 JS Fiddle，可以帮助您入门，也可以让您了解我所指的有趣行为。请注意它如何不断滚动直到到达最后一个元素。

JS DEMO

Answer 1

每当遇到任何空字段时，您都可以通过返回 false 来突破 $.each 。类似这样的

$("#submit").on('click',function(){
    var req = $('.required');
    $.each(req, function(e){
        var curr_val = $(this).val();
        if(! curr_val)
        {
          $(this).addClass('border');
          $('html, body').animate({            // added for scrolling purposes
            scrollTop: $(this).offset().top
          }, 200);
            return false;
        }
   });
});​

希望这有帮助..