Using $(this) inside of a find function jquery-CodePudding

I need to find a div with class 'controller_hover' and then be able to access it with $(this) so I can toggle the next or previous div on a controller dpad left and right.

I have this snippet for the right dpad arrow but its not working:

if (event.data.action == "right"){
   $(".controller_hover").find(function(){
       $(this).next('.select').toggleClass("controller_hover");
       $(this).toggleClass("controller_hover");
   })
}

HTML

<div >
  <div ></div>
  <div >Select player</div>
  <div ></div>
  <div  data-player="1">Player 1</div>
  <div  data-player="2">Player 2</div>
  <div >×</div>
  <div ></div>
</div>

CodePudding user response：

Please add your whole code in code snippet tool(<> icon), you can add alert for your logic.

$(document).ready(function () {
//if (event.data.action == "right"){
   $(".controller_hover").find(function(){
   alert('hi');
       $(this).next('.select').toggleClass("controller_hover");
       $(this).toggleClass("controller_hover");
   })
//}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <div ></div>
  <div >Select player</div>
  <div ></div>
  <div  data-player="1">Player 1</div>
  <div  data-player="2">Player 2</div>
  <div >×</div>
  <div ></div>
</div>

Please check this link: Handle arrow keys from D-pad on WebView Google Tv app

CodePudding user response：

Got what I needed with:

if (event.data.action == "right"){
    current_player = $(".controller_hover");
    next_player = $(".controller_hover").next(".select");
    
    if(next_player.hasClass('select')){
       current_player.toggleClass("controller_hover");
       next_player.toggleClass("controller_hover");
    }
}