测试页面上是否存在 div，并将焦点设置为第一个

Question

我有以下 HTML，仅在出现错误状态时才显示：

<div class="validation-summary-errors text-danger">
  <span>Errors:</span>
  <ul>
    <li>Error, please refresh.</li>
  </ul>
</div>

我想将焦点设置为页面下方足够远的 DIV，当用户位于顶部时看不到它，所以我在页面上尝试了这个 jQuery：

  if ($('.validation-summary-errors').length) {
            $('.validation-summary-errors').first().focus();
  }

但它不起作用，焦点仍然在页面重新加载时的默认位置（页面顶部）。

Answer 1

.focus() 不适用于

div：

焦点

事件在元素获得焦点时发送到该元素。此事件 隐式适用于一组有限的元素，例如表单 元素 （、等） 和链接 （）。最近 浏览器版本，事件可以扩展为包含所有元素 类型，方法是显式设置元素的 TabIndex 属性。一 元素可以通过键盘命令（例如 Tab 键）获得焦点，或者 通过鼠标单击元素。

http://api.jquery.com/focus/

将焦点集中在div 或部分的最佳方法是滚动到它。您可以使用 scrollTop 使用 jQuery 执行此操作：

$('html, body').animate({
   scrollTop: $('yourElementHere').offset().top 
 }, 'slow');