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>
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:
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.
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.
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).
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.