jquery - 在for循环中从jQuery编写CSS

我的脚本需要在页面的部分中动态创建一个样式表（而不是在每个元素上放置内联样式，因为稍后需要用媒体查询覆盖这些样式）。

编码

for (var i=0; i<theElements.length; i++){

    $(theElements[i]).not('.responsive-wrap').each(function(i, elem){
        var theWidth = $(this).width();
        var parentWidth = $(this).parent().width();

        $(this).addClass('element' + [i]);

        $("#dynamicStylesheet").text('.element' + [i] + ' {max-width: ' + theWidth + 'px;}');
    });
}

主要问题是：

每次循环运行时，这将完全覆盖#dynamicStylesheet中的文本（因此，当我加载页面时，.element22只有一条规则）。如何在不覆盖的情况下添加文本？

奖励积分的子问题：


这在大多数情况下都有效，但是仅当[i]处于正方形时
括号。为什么是这样？

我在这里需要for loop还是本质上是.each(function(){})
反正创建for loop吗？在我尚未发布的each中，该函数下面还有另一个for loop函数，以使其简洁。

最佳答案

好的，几件事。假设theElements是HTML元素数组，则each是不必要的。但这似乎并非如此，因为您说element22正在显示（如果element0是HTML元素数组，那么您编写的代码只会一遍又一遍地创建theElements）。因此，显然theElements是一个数组数组或jQuery对象数组。给定它的名字，这很奇怪，但是让我们继续。

正如其他人提到的那样，您每次迭代都会覆盖文本，这很不好。构建字符串稍微好一点，但是您仍然需要重复进行字符串连接，这很慢。如果必须这样做，我们应该附加到一个数组，然后在最后将其连接在一起（这样做更快，因为附加到字符串会每次从头开始创建整个字符串）。

var css = [];
for (var i = 0; i < theElements.length; i++) {
    $(theElements[i]).not('.responsive-wrap').each(function(i) {
        var theWidth = $(this).width();
        $(this).addClass('element' + i);
        css.push('.element' + i + ' {max-width: ' + theWidth + 'px;}');
    });
}
$("#dynamicStylesheet").text(css.join('\n'));

现在，它可以工作，并且可以做您想要的。但这几乎绝对不是正确的方法来做您想做的事情。在客户端上动态构建CSS不好，除非您正在编写类似CSS编辑器的代码。解决任何导致您走这条路的问题的方法要简单得多。

如果创建客户端样式表绝对至关重要，那么也有更好的方法来做到这一点。创建一个适用于theElements元素的所有元素的CSS规则（哇，看看那句话）。如果是随机选择它们，那是不可能的，但是如果通过某种逻辑查询找到它们，则可以在CSS中使用相同的查询。

就[i]而言，我不知道该告诉您什么。由于JavaScript对数组进行字符串化的怪异方式，它们是等效的，并且如果i对您不起作用，则存在某些错误。如果我是我，我会使用i.toString()，但是i应该可以正常工作。

编辑

如果theElements是标记名数组，则可以简化为：

var tagNames = theElements; // clear variable names are important!
var css = [];
$(tagNames.join(',')).not('.responsive-wrap').each(function(i) {
    var $this = $(this);
    $this.addClass('element' + i.toString());
    css.push('.element' + i.toString() + '{ max-width: ' + $this.width() + 'px; }');
});
$("#dynamicStylesheet").text(css.join('\n'));