在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;}');
    });
}

---

for（var i=0；i这将是一种快速添加文本的方法，而不是每次都覆盖文本

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

至于for循环，是的，
每个
都应该是您所需要的。如果您需要数字，可以添加一个计数变量。我还将
$（“#dynamicStylesheet”）
设置为循环外的一个变量，这样jQuery就不必每次都查找元素，这是为了提高性能

var i = 0,
    stylesheet = $("#dynamicStylesheet");

$(theElements).not('.responsive-wrap').each(function(){
    var theWidth = $(this).width();
    var parentWidth = $(this).parent().width();
    var elemName = "element" + i;

    $(this).addClass(elemName);

    stylesheet.text(
             stylesheet.text()
             + '.' + elemName + ' {max-width: ' + theWidth + 'px;}');
});

编辑

如果元素是一个标记名数组，那么像这样的东西会比我原来的工作得更好

var i = 0,
    stylesheet = $("#dynamicStylesheet");

$.each(theElements, function(){
  if( !$(this).hasClass('responsive-wrap') ){

    var theWidth = $(this).width();
    var parentWidth = $(this).parent().width();
    var elemName = "element" + i;

    $(this).addClass(elemName);

    stylesheet.text(
             stylesheet.text()
             + '.' + elemName + ' {max-width: ' + theWidth + 'px;}');
 }
});

未测试，但应该可以使用。
这是一种快速添加文本的方法，而不是每次都覆盖文本

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

至于for循环，是的，
每个
都应该是您所需要的。如果您需要数字，可以添加一个计数变量。我还将
$（“#dynamicStylesheet”）
设置为循环外的一个变量，这样jQuery就不必每次都查找元素，这是为了提高性能

var i = 0,
    stylesheet = $("#dynamicStylesheet");

$(theElements).not('.responsive-wrap').each(function(){
    var theWidth = $(this).width();
    var parentWidth = $(this).parent().width();
    var elemName = "element" + i;

    $(this).addClass(elemName);

    stylesheet.text(
             stylesheet.text()
             + '.' + elemName + ' {max-width: ' + theWidth + 'px;}');
});

编辑

如果元素是一个标记名数组，那么像这样的东西会比我原来的工作得更好

var i = 0,
    stylesheet = $("#dynamicStylesheet");

$.each(theElements, function(){
  if( !$(this).hasClass('responsive-wrap') ){

    var theWidth = $(this).width();
    var parentWidth = $(this).parent().width();
    var elemName = "element" + i;

    $(this).addClass(elemName);

    stylesheet.text(
             stylesheet.text()
             + '.' + elemName + ' {max-width: ' + theWidth + 'px;}');
 }
});

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

您不需要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);

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

您不需要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);

好的，那么，有几件事。假设
元素
是一个HTML元素数组，那么
每个
都是不必要的。但事实似乎并非如此，因为你说
元素22
出现了（如果
元素
是一个HTML元素数组，那么您编写的代码只会一次又一次地创建
元素0
）。因此显然
元素
是一个数组数组，或者是一个jQuery对象数组。鉴于它的名称，这很奇怪，但让我们来讨论一下

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

好的，那么，有几件事。假设
元素
是一个HTML元素数组，那么
每个
都是不必要的。但事实似乎并非如此，因为你说
元素22
出现了（如果
元素
是一个HTML元素数组，那么您编写的代码只会一次又一次地创建
元素0
）。因此显然
元素
是一个数组数组，或者是一个jQuery对象数组。鉴于它的名称，这很奇怪，但让我们来讨论一下

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

应该对您的概念进行跨浏览器检查，在IE版本中尝试更新样式标记文本时遇到问题，并且没有对元素进行更改。应该对您的概念进行跨浏览器检查，在IE版本中尝试更新样式标记文本时遇到问题，并且没有对元素进行更改。尽管不修改DOM eve很好在一次迭代中，这并不是真正的最优，因为字符串连接有一个线性代价（因此整个过程的性能是二次的）。通常最好尽可能避免重复字符串连接。不幸的是，这不起作用-很可能是因为元素（如其他地方所述）是一个字符串数组，其中包含标签名，如'div'、'section'、'article'等。使用此代码（以及我尝试过的变体）很遗憾，样式表根本没有更新。@IanHenry，你能告诉我一些关于字符串连接的性能成本的统计数据吗？我一直认为这是一种成本非常低的方法。@DouglasA.Crosby因为JavaScript字符串是不可变的，当你连接a和B时，你实际上是在创建一个长度为a+B的新字符串。当你连接C时，你正在创建一个长度为a+B+C的新字符串。再次连接，你正在创建a+B+C+D。每次连接都变得越来越昂贵；这是一个经典的Schlemiel算法。这就是为什么许多语言（尽管不是JS）提供类似Java的StringBuffer或C#的StringBuilder之类的类。@根据浏览器/计算机的不同，字符串连接的计算时间最短（数百万次运算/秒），在某些情况下，浏览器会对此进行优化。因此，字符串concat比添加到DOM元素要快（我认为我们可以同意这一点）。当性能增益可以忽略不计时，可读性是首选。虽然每次迭代都不修改DOM很好，但这并不是最佳的，因为字符串串联具有线性成本（因此整个过程的性能是二次的）。通常最好尽可能避免重复串接。不幸的是，这不起作用-很可能是因为元素（如其他地方所述）是一个字符串数组，其中包含标签名，如“div”、“section”、“article”等。使用此代码（以及我尝试过的变体）很遗憾，样式表根本没有更新。@IanHenry你能告诉我一些关于s的性能成本的统计数据吗