Question

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

代码：

$('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

除非您设置focus，否则无法将li放在tabindex元素上，因为默认情况下，它不是可聚焦元素。如果您设置了tabindex，则可以使用：

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

<强>段：

＆＃13;

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

＆＃13;

<!----- 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>

＆＃13;

备注：

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

如果您的HTML有任何实际的锚元素，就像您提供的JavaScript代码所暗示的那样，您可以使用$("#dfruits a").first().focus();将焦点设置为此类元素而不使用{{ 1}}如果他们设置了tabindex属性。

如果您关注代码中的速度，最好使用href代替$("#dfruits").find("li")，因为$("#dfruits > li")引擎会尝试从右到左匹配选择器（{ {3}}＆＃39;评论）。

Answer 2

首先，要将焦点设置在非输入元素上，您需要设置tabindex。其次，你没有a锚元素，因此在你的标记中没有选择任何内容。解决方法在您希望获得焦点的所有li上设置tabindex，这里我只是将其设置在第一个。

以下是一些代码片段来说明

$('#dfruits').find('li').first().attr( 'tabIndex', -1);// make it able to focus
$('#dfruits').find('li').first().focus();//set focus on li
$('#dfruits').find('li').find('a').first().focus();// set focus to first anchor

//using cached object
var firstAnchor = $('#dfruits').find('li').find('a').first();
firstAnchor.attr('href','#');
firstAnchor.css('color', 'red').focus();


// using each. set href not in markup
$('#dfruits').find('li').find('a').first().each(function() {
    $(this).attr('href','#');
    $(this).css('color', 'red');
    $(this).focus()
});

既然你有p，我们实际上会使用它......

// using each
$('#dfruits').find('li').find('p').first().each(function() {
    $(this).attr( 'tabIndex', -1);// make it able to focus
    $(this).css('color', 'red');
    $(this).focus()
});

<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>

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

2 个答案: