如何使用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

除非设置li元素的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 。 这意味着只能通过JavaScript编程方式赋予li元素焦点，而不是通过按下tab键。

2. 如果您的HTML有任何实际的锚元素（如您提供的JavaScript代码所暗示），则可以使用$("#dfruits a").first().focus(); 设置焦点到此类元素，而无需使用tabindex前提是它们具有href属性集。

3. 如果您只关心代码的速度，则最好使用$("#dfruits").find("li")代替$("#dfruits > li") ，因为Sizzle引擎会尝试将选择器从右向匹配左（ @Mark Schultheiss的评论）。

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>