如何使用jQuery訪問在jQuery中創建的元素

Question

我正在使用jQuery創建元素，並在此過程中為其分配ID。 在我的代碼的稍后部分，我想通過它們的ID訪問這些元素。 但是，我無法使用jQuery執行此操作。 如果我僅使用核心JS，則它可以工作。 為什么會這樣呢？

var createTable = function(rows, columns, height, width) {
    var $table = $("<table>");
    $("body").append($table);

    for (var i = 1; i < rows + 1; i++) {
        var $tr = $("<tr>");
        $table.append($tr);
        for (var j = 1; j < columns + 1; j++) {
            var $td = $("<td>", { id: i + "." + j });
            $td.css("height", height + "px").css("width", width + "px")
               .css("border", "1px black solid");
            $tr.append($td);
        }
    }
}


createTable(4, 4, 150, 100);

不起作用：

$("#1.1").css("border", "1px red solid");

作品：

var onePointOne = document.getElementById("1.1");
onePointOne.style.border = "1px red solid";

Answer 1

點在選擇器中具有特殊含義：它們是類選擇器。 您需要轉義點以找到正確的ID：

$('#1\\.1')...

Answer 2

的. 運算符表示該類，因此它將搜索id為1的類，但您無法訪問它們，但是id包含. 您需要使用斜杠將元字符轉義的元字符：

$("#1\\.1").css("border", "1px red solid");

在這里查看有關此的更多信息

但我建議您不要使用. id的運算符，您可以像1-1那樣分配它，就可以像$('#1-1')這樣輕松訪問

此外，我建議您不要使用以數字開頭的ID。

Answer 3

試試這個，它將起作用：

$("#1\\.1").css("border", "1px red solid !important");