2015-08-20 42 views
-1

我使用的是bxSlider,但我無法集中我的<ul>列表的子元素。我想在其中集中<div><li>。下面是我的HTML代碼部分:使用jQuery無法聚焦子元素

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

我試圖把重點放在孩子<div> ID爲 'E1',但未能成功。下面是相關的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] 

我想以從<div>得到data-time="00:30",並且也關注它。

+2

注重'li'。這個事件不會工作隱含地適用於有限的一組元素,例如表單元素(,