.css()不是一个函数 [jQuery]?

Question

我有以下自定义标签/指令：

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

我创建了一个键盘控件，其目标是在每个键盘事件（shift + right arrow）之后，将焦点放在selectedTiles array中的每个"tile"指令上。

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

        }

当我获取变量elem的控制台日志时，我会得到出现在dom中的瓷砖数组（这是预期的）。问题在于，当我尝试添加.attr()函数或.css()函数时，我会收到错误，指出这些不是函数。我该如何调整？

- KO12

---

使用$(el).attr('tabindex'...)而不是el.attr('tabindex'...)，因为在使用任何jQuery方法（如.attr()或.css()）之前，你需要一个jQuery包装器。 - Kartikeya Khosla

Answer 1

使用 $(elem[curIndex]) 而不是 elem[curIndex]，尝试这样做：

.css() 是 jQuery 的一个方法，如果你想使用该方法，可以通过以下方式访问元素：

所以代码应该是这样的：

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

现在，如果你想使用JavaScript为元素添加样式，可以尝试以下代码：

(仅供参考)

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

- Dhara Parmar

Answer 2

当您使用像 elem[curIndex] 这样的语法时，元素（jQuery包装器）就会变成 JavaScript 对象。因此，您可能会遇到这样的错误，因为它们不是核心 JavaScript 方法而是 jQuery 的方法。

所以，您需要再次使用 jQuery 进行包装：

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

- Bhojendra Rauniyar

Answer 3

{
  title: 'Call',
  start: '2020-12-09',
  backgroundColor: '#4caf50',
  borderColor: '#4caf50',
  avatar: "https://picsum.photos/200",
  eventDidMount: function(info) {
    $(info.el).find(".fc-event-main").css('padding-left', '28px', 'position', 'relative');
    $(info.el).find(".fc-event-main").after($("<div class=\"fc-avatar-image\"></div>").html('<img src=\'' + eventObj.extendedProps.avatar + '\' />'));
  }
}

- Neelam Latwal

---

欢迎来到SO！你的回答有潜力，但如果能在回答中添加更多细节会更好。 - MeanGreen