.css() is not a function [jQuery]?
<p>I have the following custom tag/directive :</p>

<pre><code>&lt;tile class="ng-scope gridster-item" tilevalue="1" gridster-item="tile" row="0" col = "0" ng-repeat="tile in selectedTiles"&gt; &lt;/tile&gt;
</code></pre>

<p>I've created a keyboard control where the goal is to focus on each tile ("tile" directive) in the <code>selectedTiles array</code> per keyboard event <code>(shift + right arrow)</code>.</p>

<pre><code>// Keyboard Tile Navigation

        //Starting pos
        var curIndex = -1

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

        if (event.shiftKey &amp;&amp; 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");

        }
</code></pre>

<p>When I get a console log of the variable <code>elem</code> I get the array of tiles that appear in the dom (as is expected). The problem is when I try to add a <code>.attr()</code> function or a <code>.css()</code> function, I get the error stating these are not functions, how can i adjust?</p>