填充<ul>时，比.empty（）更有效的方法可以避免重复

Question

我正在创建一个表单。我正在尝试构建一个列表，该列表动态填充表示此表单中无值输入字段的项目。我在小提琴中创建了一个简化版本来说明我的问题。基本上，我有我想要的错误列表。它成功计算空白输入字段并在输入或删除数据时更新此计数并相应地填充列表。但是，为避免此列表中出现重复条目​​，我目前正在每次调用时将其清空。这似乎是相当低效的，正如你在小提琴上看到的，它运行它是空的并且在模糊后立即构建函数，所以如果输入是焦点并且人们试图点击错误链接，则需要几个在滚动到有问题的空输入之前单击。所以我的问题是，是否有另一种方法可以避免重复的条目，它运行得足够快，以便它可以立即从焦点点击滚动功能？

我希望这很清楚。我添加了一些空格以允许滚动效果，因此您可以在滚动发生之前见证所需的多次点击。）

＆＃13;

＆＃13;

$(function(){

  var submit = $('input[type="submit"]');
  var monday = $("input[name='MONDAY']");
  var tuesday = $("input[name='TUESDAY']");
  var wednesday = $("input[name='WEDNESDAY']");
  
  $('input').eq(0).focus();
  
  // disable submit 
  submit.attr("disabled", true);
  
  // call formValidate on load and on input blur
  formValidate();
  $('input').blur(function(){
    formValidate();
  });
  
  function formValidate(){
      // inputs 
      monday = $("input[name='MONDAY']");
      tuesday = $("input[name='TUESDAY']");
      wednesday = $("input[name='WEDNESDAY']");
      
      // store values of inputs in vars
      var inputCheck = {
          'monday':       monday.val(),
          'tuesday':      tuesday.val(),
          'wednesday':    wednesday.val()
      };

      var myErrors = [];

      myErrors.splice(0,myErrors.length);
      
      // if input has no value, add to error array
      $.each( inputCheck, function(key, value){
          if (value === '') {
             myErrors.push(key);
          }
      });
      
      // if any errors, create li for each
      if (myErrors.length > 0 ) {
      
          // display errors div
          $('.errors').addClass('exist');
          $('.errors').find('span').html(myErrors.length);
          
          // empty ul to avoid duplicate entries
          $('.error-box-item ul').empty();
          
          // populate ul with any errors
          $.each(myErrors, function(i) {
            var li = $('<li>');
            var link = myErrors[i].replace("-", " ");
            var formattedLink = toTitleCase(link);
            var tag = "#err-" + myErrors[i];
            var a = $('<a></a>').attr("href", tag);
            a.append(formattedLink);
            li.append(a);
            $('.error-box-item ul').append(li);

          });
      } else {
      
          // if no errors, hide error info and 
          // enable the submit button
          $('.errors').removeClass('exist');
          submit.attr("disabled", false);
      }

  } // end validate form

  function toTitleCase(str) {
    return str.replace(/(?:^|\s)\w/g, function(match) {
      return match.toUpperCase();
    });
  }
  
    
  // scroll to link
  $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top - 50
          }, 500);
          return false;
        }
      }
    }); // end scroll 
    
}); // end ready  

＆＃13;

.errors {
display: none;
}
.errors.exist {
display: block;
}
.demo-space {
height: 150px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>Monday:</p>
  <input id="err-monday" type="number" name="MONDAY">
  <p>Tuesday:</p>
  <input id="err-tuesday" type="number" name="TUESDAY">
  <p>Wednesday:</p>
  <input id="err-wednesday" type="number" name="WEDNESDAY">
  <p>
    <input type="submit" name="submit" value="submit">
  </p>
</form>
<div class="demo-space"></div>
<div class="errors">
  You have <span></span> errors:
  <div class="error-box-item">
    <ul class="list">
    </ul>
  </div>
</div>
<div class="demo-space"></div>

＆＃13;

＆＃13;

＆＃13;