Agfdhyk

I have a bunch of elements, all with the same class, and I'm trying to sort out what happens each time one of them is tabbed to. The tabbing event itself is fine, it's just this bit of code here that's giving me an issue.

Strangely, the result of the code below is that the console will log everything as expected (firstly the object that is in focus, then that same object with the new added class), however the DOM appears unaffected in devtools (ie no new class has been added). Thoughts?

$('.item__link').each(function() {

  if ($(this).is(':focus')) {

    console.log($(this));

    $(this).addClass("test");

    console.log($(this));

  }

})

EDIT - here is the handler in its entirety:

  $(window).on("keyup", function (e) {

    // check that tab key has been pressed

    var code = (e.keyCode ? e.keyCode : e.which);



    if (code == 9) {



      if ($('#main-menu__trigger').is(':focus') && !#main-menu__trigger.hasClass('open')) {

         // do stuff

      } else {

        $('.item__link').each(function() {

          if ($(this).is(':focus')) {

            console.log($(this));

            $(this).addClass("test");

            console.log($(this));

          }

        });

      };



    };

   code = 0;

  });