javascript - 如何使用 javascript 或 jquery 将焦点设置在第一个 LI 上？

Question

如何使用 JavaScript 或 jQuery 将焦点设置在第一个 li 上？我是初学者。

代码:

$('ul li').each(function() {
  if ($(this).find('a').length > 0) {
    $(this).find('a').css('color', 'red');
    $(this).find('a').focus()
    return false;
  }
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="dfruits" class="sinline">
  <li><p class="StockBez">ROBO</p></li>
  <li><p class="StockBez">SQ</p></li>
  <li><p class="StockBez">NVDA</p></li>
</ul>

Answer 1

除非设置了 tabindex，否则不能将 focus 放在 li 元素上，因为默认情况下它不是可聚焦的元素。如果你设置了它的tabindex，那么你可以使用:

/* Put focus on the first li element. */
$("#dfruits > li").first().focus();

片段:

/* ----- JavaScript ----- */
$("#dfruits > li").first().focus();

<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="dfruits" class="sinline">
  <li tabindex="-1">
    <p class="StockBez">ROBO</p>
  </li>
  <li tabindex="-1">
    <p class="StockBez">SQ</p>
  </li>
  <li tabindex="-1">
    <p class="StockBez">NVDA</p>
  </li>
</ul>

<小时/>

注释:

1. 在上面的 HTML 代码中，我将每个 li 元素的 tabindex 设置为 -1。这意味着 li 元素只能通过 JavaScript 以编程方式获得焦点，而不能通过点击 tab 键。

2. 如果您的 HTML 有任何实际的 anchor 元素，正如您提供的 JavaScript 代码所暗示的那样，您可以使用 $("#dfruits a ").first().focus(); 将焦点设置为此类元素，无需使用 tabindex，前提是它们设置了 href 属性。

3. 如果您注重代码的速度，最好使用 $("#dfruits").find("li") 而不是 $("#dfruits > li")，因为 Sizzle 引擎尝试从右到左匹配选择器(@Mark Schultheiss ' 注释)。