Using $(this) inside of a find function jquery

Question

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 class="dialog-alert dialog-visible">
  <div class="dialog-border"></div>
  <div class="dialog-title">Select player</div>
  <div class="dialog-message"></div>
  <div class="select controller_hover" data-player="1">Player 1</div>
  <div class="select" data-player="2">Player 2</div>
  <div class="dialog-close">×</div>
  <div class="dialog-clearFloat"></div>
</div>

Why do you think you *must* use `$(this)`? `var hover = $(".controller_hover"); hover.next...` [find()](https://api.jquery.com/find/) doesn't accept a function callback. — freedomn-m, Mar 08 '22 at 07:09
Yeah thats what I needed to find out. got it working with a different approach — Dexx, Mar 08 '22 at 07:52

score 0 · Answer 1 · answered Mar 08 '22 at 05:32

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 class="dialog-alert dialog-visible">
  <div class="dialog-border"></div>
  <div class="dialog-title">Select player</div>
  <div class="dialog-message"></div>
  <div class="select controller_hover" data-player="1">Player 1</div>
  <div class="select" data-player="2">Player 2</div>
  <div class="dialog-close">×</div>
  <div class="dialog-clearFloat"></div>
</div>

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

I'd recommend using `console.log("test")` rather than an `alert`. An alert will quickly get annoying if it appears more than a few times. An alert will convert an object to a string, so you often get `[object Object]` (see how many SO questions ask what that is...). — freedomn-m, Mar 08 '22 at 07:07
yes, use console will give you better idea of loop and you know where what values comes — Ajay2707, Mar 09 '22 at 04:08

Dexx · Accepted Answer · 2022-03-08T08:05:06.803

0

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");
    }
}

edited Mar 08 '22 at 08:05

answered Mar 08 '22 at 07:53

Dexx

163
1
4
15

Regarding the use of `.next(".select")` - see [this answer](https://stackoverflow.com/questions/38562192/how-to-find-next-similar-sibling-moving-down-in-the-dom-tree/38562633#38562633) – freedomn-m Mar 08 '22 at 07:55

Using $(this) inside of a find function jquery

2 Answers2