Question

我使用bxSlider，但我无法关注<ul>列表中的子元素。我希望将<div>或<li>集中在其中。以下是我的 HTML 代码的一部分：

<div class="bx-wrapper" style="max-width: 1308px; margin: 0px auto;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 58px;">
    <ul id="jalur" class="jalur" tabindex="21" style="width: 2715%; position: relative; transition-duration: 0s; transform: translate3d(-40px, 0px, 0px);">
        <li id="lix1" style="float: left; list-style: outside none none; position: relative; width: 218px;">
            <div class="fl">
                <div id="e1" class="fl kurohige-prev jaman" data-time="00:30">00:30-01:00</div>
                <div class="fl line-0"></div>
            </div>
        </li>
        <li id="lix2" style="float: left; list-style: outside none none; position: relative; width: 218px;">

        ...
    </ul>   
</div>

我已经尝试将注意力集中在id为{e1＆＃39;的孩子<div>上，但却失败了。以下是相关的JavaScript代码：

    $(document).on( "keydown", function(event) {
    var key = event.which;
    console.log(key); //39-->right 37-->left, 38-->up 40-->down
    if (key == '39') //success
    {
        var foc = $(':focus');
        $(foc).next().focus();
        console.log(foc);
    }
    else if (key == '37') //success
    {
        var foc = $(':focus');
        $(foc).prev().focus();
        console.log(foc);
    }
    else if (key == '40') //failed
    {
        $('#jalur li').first().focus();
        var foc = $(':focus');
        console.log(foc);
    }
    else if (key == '38') //failed
    {
        $('#jalur').children(":first").focus();
        var foc = $(':focus');
        console.log(foc);
    }
});

但是，使用Firebug的命令行我可以转到任何元素：

$('#jalur li').first().focus();

这将提供以下输出：

Object[li#lix1]

我想从data-time="00:30"获取<div>并关注它。

Answer 1

焦点不会在<li>上工作。

来自jQuery Docs，

此事件隐含地适用于一组有限的元素，例如作为表单元素（<input>，<select>等）和链接（<a href>）。

此外，我不知道你想要达到的目的，但

你可以，

$('#jalur li').first().effect('highlight', {}, 1000);

<强> DEMO

无法使用jQuery聚焦子元素

1 个答案: