使用变量代替调用 jQuery 选择器答案

【问题标题】：Using variables in place of calling jQuery selectors使用变量代替调用 jQuery 选择器
【发布时间】：2015-01-15 01:39:20
【问题描述】：

var container = $("#container");
var row = $(".row");
container.append("<button>CLEAR SCREEN</button>");

for (i = 1; i <= x; i++) {
container.append("<div class='row " + i + "'></div>");

for (j = 1; j <= x; j++) {
$(".row." + i).append("<div class='cell " + j + "'></div>");
}
}

我想用一个变量来改变 $(".row.") ，这样我就不会在每个循环中都调用它并且似乎无法让它正常工作。我试过 - (row + "." + i).append... 但没用。

【问题讨论】：

$(".row." + i).append( 中的第二个点是错字吗？
这不是错字，这是他试图附加的字符串。
类名不能以数字开头！另请参阅：stackoverflow.com/questions/9210307/html-5-classnames-and-ids。 “要使用 Selectors API 在 CSS 或 JavaScript 中定位以数字开头的类名或 ID，您应该对它们进行转义。”

标签： jquery variables jquery-selectors concatenation

【解决方案1】：

在执行循环之前选择所有行并在循环内过滤结果。

var row = $(".row");

...

for (j = 1; j <= x; j++) {
    row.filter("." + i).append("<div class='cell " + j + "'></div>");
}

编辑： 好的，我错过了在第一个循环中创建的行，所以在此之前它们自然不能用于选择，并且选择不会更新。因此，我建议您在创建时保存对行的引用并使用它，而不是选择行：

var container = $("#container");
container.append("<button>CLEAR SCREEN</button>");

for (i = 1; i <= x; i++) {
    $row = $("<div class='row " + i + "'></div>");

    for (j = 1; j <= x; j++) {
        $row.append("<div class='cell " + j + "'></div>");
    }
    container.append($row);
}

【讨论】：

这在我在第二个 for 循环之前的第一个 for 循环中初始化时有效。如果我尝试在任一循环之外对其进行初始化，则它不起作用。是因为现在还创建了行吗？

【解决方案2】：

这个怎么样。我相信你想要那个时期？

for (j = 1; j <= x; j++) {
    row.add("." + i).append("<div class='cell " + j + "'></div>");
}

【讨论】：