.css () is not a function [jQuery]?

Question

I have the following custom tag / directive:

<tile class="ng-scope gridster-item" tilevalue="1" gridster-item="tile" row="0" col = "0" ng-repeat="tile in selectedTiles"> </tile>

I created a keyboard control where the goal is to focus on each tile (the "tile" directive) in selectedTiles arraythe keyboard event (shift + right arrow).

// Keyboard Tile Navigation

        //Starting pos
        var curIndex = -1

        //keyboard control
        $(document).keydown(function(event) {

        if (event.shiftKey && event.which === 39) {
                console.log("right");
                focusNext();
                }
           });

        function focusNext() {
            focusTile(+1);
        }

        function focusTile(delta) {

            var visibleTiles = $scope.selectedTiles;
            var elem = $("[gridster-item='tile']");

            curIndex = curIndex + delta;
            el = elem[curIndex];

        el.attr('tabindex', -1).focus();    
        el.css("border-color", "yellow");

        }

When I get the console log of the variable elem, I get an array of plates that appear in dom (as expected). The problem is that when I try to add a function .attr()or function .css(), I get an error that these are not functions, how can I configure?

Answer 1

$(elem [curIndex]) elem [curIndex] :

.css() - jquery, , ,

, :

$(elem[curIndex]).css("border-color", "yellow");

, javascript , :

( )

var myElement = document.querySelector("#superman");
myElement.style.backgroundColor = "#D93600";

Answer 2

, elem[curIndex], elem ( jQuery) javascript. , ​​, javascript-, jquery.

, jquery:

$(elem[curIndex])//now using .css() or .attr() will not throw you errors.