jQueryでdivラップされた兄弟にフォーカスを設定するにはどうすればいいですか？原因私のコントロールを超えた要件に

（なしマウス）、私は、Webページ上のボタンのスタックを上下にスクロールする（タブに加えて）、矢印キーを使用できるようにする必要があります。jQueryでdivラップされた兄弟にフォーカスを設定するにはどうすればいいですか？原因私のコントロールを超えた要件に

私は、私のjQueryのセレクタは、もはや機能し、純粋な兄弟であるボタンでそれを行う方法を考え出していないが、私はdiv要素でこれらのボタンをラップする場合（縦それらをスタックします）。私は基本的に "私の親の次の兄弟の子供"のセレクターが必要です。私は何時間も壁に頭を打ち、これを理解できません。次の例では

あなたは下のボタンのいずれかにフォーカスを設定する場合は、矢印キーを使用すると、ボタンの間を移動できるようになります。ただし、上部のペアのボタンはdivで囲まれており、矢印キーはそこでは機能しません。

ヘルプ？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <base href="http://demos.telerik.com/kendo-ui/button/index"> 
 
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
 
    <title></title> 
 
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" /> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" /> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.mobile.min.css" /> 
 

 
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script> 
 
</head> 
 
<body> 
 
    <div id="example"> 
 
     <div class="demo-section k-content"> 
 
      <div> 
 
       <p> 
 
        This doesn't work with up/down arrow keys: 
 
        <div><button id="textButton1" tabIndex="0">Button 1</button></div>         
 
        <div><button id="textButton2" tabIndex="0">Button 2</button></div> 
 
       </p> 
 
        
 
       <p> 
 
        But this does: 
 
        <button id="textButton3" tabIndex="0">Button 3</button>           
 
        <button id="textButton4" tabIndex="0">Button 4</button>     
 
       </p> 
 
      </div> 
 
      
 
      <script>      
 
       $(document).ready(function() { 
 
        $("#textButton1").kendoButton(); 
 
        $("#textButton2").kendoButton(); 
 
        $("#textButton3").kendoButton(); 
 
        $("#textButton4").kendoButton(); 
 
        $(".k-button").width(350); 
 
        $(".k-button:first").focus();     
 
       }); 
 
       
 
       document.addEventListener('keydown', function(event) 
 
       { 
 
        const key = event.key; 
 
        switch (key) 
 
        { 
 
         case "ArrowDown": 
 
          //alert('Down'); 
 
          $(".k-button:focus").next().focus(); \t 
 
          break; 
 
         case "ArrowUp": 
 
          //alert('Up'); 
 
          $(".k-button:focus").prev().focus(); \t 
 
          break; 
 
        } 
 
       }); 
 
      </script> 
 

 
      <style> 
 
       .demo-section p { 
 
        margin: 0 0 30px; 
 
        line-height: 50px; 
 
       }    
 
       .k-button { 
 
        margin-bottom: 20px; 
 
       } 
 
        
 
       .k-button .k-icon { 
 
        float: right; 
 
        margin: 2px; 
 
       } 
 
      </style> 
 
     </div> 
 

 
</body> 
 
</html>

出典

2017-10-06 Matt Redmond

役に立てば幸い

document.addEventListener('keydown', function(event) { const key = event.key; var lastButtonIndex = $(".k-button").length - 1; var focusedButtonIndex = $(".k-button").index($(".k-button:focus")); switch (key) { case "ArrowDown": if (focusedButtonIndex < lastButtonIndex) $(".k-button").eq(focusedButtonIndex+1).focus(); break; case "ArrowUp": if (focusedButtonIndex > 0) $(".k-button").eq(focusedButtonIndex-1).focus(); break; } });

私は簡単に（前方）TABキーを使用して、ボタンの間を移動することができるとShilft + TAB（後方）（？？） – Johannes

私は知っています。矢印キーが同じことをするのはビジネス上の必要条件です。私はルールを作っていませんでした。 –

あなたは、IDので作業しているように私はあなたがそれを試すことができ、この例を作りました。

私は、次および前では動作しませんでしたが、私は各ボタンへのデータ・キーを追加しました。

は、あなたが知っているように、それはnext()またはprev()が唯一の兄弟で動作し、あなたの

    
 
       $(document).ready(function() { 
 
        $("#textButton1").kendoButton(); 
 
        $("#textButton2").kendoButton(); 
 
        $("#textButton3").kendoButton(); 
 
        $("#textButton4").kendoButton(); 
 
        $(".k-button").width(350); 
 
        $(".k-button:first").focus();     
 
       }); 
 
       
 
       document.addEventListener('keydown', function(event) 
 
       { 
 
       \t \t const key = event.key; 
 
       \t \t switch (key) 
 
        { 
 
       \t \t \t case "ArrowDown": 
 
         indexKey = $(".k-button:focus").data('key')+1 
 
         $('#textButton'+indexKey).focus(); \t 
 
          
 
        \t \t \t \t break; 
 
         case "ArrowUp": 
 
         indexKey = $(".k-button:focus").data('key')-1 
 
         $('#textButton'+indexKey).focus(); \t 
 
         \t \t 
 
        \t \t \t \t break; 
 
       } 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <base href="http://demos.telerik.com/kendo-ui/button/index"> 
 
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
 
    <title></title> 
 
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" /> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" /> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.mobile.min.css" /> 
 

 
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script> 
 
    
 

 
</head> 
 
<body> 
 

 
     <div id="example"> 
 
      <div class="demo-section k-content"> 
 
       <div> 
 
        <p> 
 
\t \t \t \t \t This doesn't work with up/down arrow keys: 
 
\t \t \t \t \t 
 
         <div><button id="textButton1" data-key='1' tabIndex="0">Button 1</button></div>         
 
\t \t \t \t \t <div><button id="textButton2" data-key='2' tabIndex="0">Button 2</button></div> 
 
        </p> 
 
        
 
        <p> 
 
\t \t \t \t \t \t But this does: 
 
\t \t \t \t \t 
 
         <button id="textButton3" data-key='3' tabIndex="0">Button 3</button>           
 
\t \t \t \t \t \t <button id="textButton4" data-key='4' tabIndex="0">Button 4</button>     
 
        </p> 
 
        
 
        
 
       </div> 
 

 
      <style> 
 
       .demo-section p { 
 
        margin: 0 0 30px; 
 
        line-height: 50px; 
 
       }    
 
       .k-button { 
 
        margin-bottom: 20px; 
 
       } 
 
        
 
       .k-button .k-icon { 
 
        float: right; 
 
        margin: 2px; 
 
       } 
 
      </style> 
 
     </div> 
 

 
</body> 
 
</html>

出典

2017-10-06 16:24:09

に役立ちます願っています。あなたのケースでは、あなたが代わりにボタンのインデックスを使用することができます...私はそれが

出典

2017-10-06 16:38:36

2人が問題解決に役立つ解決法を使って解決するためのスタックオーバーフローのエチケットは何ですか？私はあなたのコードを使用しましたが、最初に答えた人と彼のコードも機能します。彼の評判は低いので、私は彼に骨を投げるべきだと感じています。 –

心配しないで！あなたの問題を解決するために選択したものに印を付けるだけで、将来あなたの質問をチェックする他の人々を助けることができます。この点は私たちを有名にするつもりはありません！ ;）あなたの問題を解決したと聞いてよかったです。良い一日と幸せなコーディングを！ –

jQueryでdivラップされた兄弟にフォーカスを設定するにはどうすればいいですか？原因私のコントロールを超えた要件に

答えて

関連する問題