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

Question

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

代码

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循环吗，或者本质上是.each(function(){}) 无论如何创建一个for循环？在 for 循环 内的这个函数下面还有另一个 each 函数，为了简洁起见，我没有发布该函数。

Answer 1

我不会在每次迭代期间添加文本。相反，构建一个字符串，然后将其添加到元素中。这也提高了性能。

您不需要 for 循环。

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

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

    cssString += '.element' + [i] + ' {max-width: ' + theWidth + 'px;}';
});

$("#dynamicStylesheet").text(cssString);