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

Question

How can I set the focus on the first li with JavaScript or jQuery ? I am a beginner.

Code:

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

You can't put focus on a li element, unless you set its tabindex , because it's, by default, not a focusable element. If you set its tabindex , then you can use:

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

Snippet:

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

---

Notes:

1. In the HTML code above, I set the tabindex of each li element to -1 . That means the li elements can only be given focus programmatically via JavaScript and not by hitting the tab key.

2. If your HTML has any actual anchor elements, as the JavaScript code you have provided implies, you can use $("#dfruits a").first().focus(); to set focus to such elements without using tabindex provided they have the href attribute set.

3. If you are all about speed in your code you had better use $("#dfruits").find("li") instead of $("#dfruits > li") , because the Sizzle engine tries to match selectors from right to left ( @Mark Schultheiss ' comment).

Answer 2

First off, to set focus on a non-input element you need to set a tabindex. Secondly you have no a anchor elements thus select nothing here in your markup. Work around set a tabindex on all the li you wish to receive focus, here I just set it on the first one.

Here are some code snips to illustrate

$('#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()
});

Now since you have p , we will actually use that...

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