构建具有可读性和维护性的HTML元素

在迭代某些表格单元格数据时，我构建了一个包含任何元素的数组。第一次迭代只是封装在一些<span>标签找到的文本，而随后的那些添加了一堆其他样式，如下图所示：构建具有可读性和维护性的HTML元素

var array = $('table').find('th').map(function(i){ 
    if (i===0){ 
     // This bit's OK 
     return '<span>' + $(this).text() + '</span>'; 
    } else { 
     // This just looks horrible 
     return '<span style="width:' + $(this).outerWidth() + 'px; display:inline-block; position:absolute; right:' + w[i-1] + 'px">' + $(this).text() + '</span>'; 
    } 
}).get();

这一切工作正常，但它是可怕的 - 我想我已经看到了一种更加优雅的方式来构建HTML元素，并在之前的某个地方使用样式。

任何人都可以提出一个更“维护友好”的方式来编写else声明吗？

编辑：使用CSS类不是一个真正的解决方案，因为代码应用基于其他计算的值。

来源

2013-05-15 verism

使用类，而不是内联CSS代码 – andrew

@andrew我想这将减少代码位，但功能也适用于宽度跨度，取决于找到的数据的宽度。 – verism

对于第一次迭代，您可以使用jQuery的['wrap'函数]（http://api.jquery.com/wrap/）将您的元素封装在''中。 – nstCactus

正如评论中已经提到的那样，考虑存储CSS类中所有元素上使用的值，本例中我将选择.something。

.something { 
    position: absolute; 
    display: inline-block; 
}

接下来，在jQuery的，你可以为你打算在这两种情况下使用它存储在一个变量的跨度元素的副本。在else块中，您可以简单地应用该类并添加各个样式。

编辑：您可以更简化代码。您将返回无论发生什么事，所以你只需要检查，如果i不等于0

var array = $('table').find('th').map(function (i){ 
    var span = $('<span>' + $(this).text() + '</span>'); 

    if (i !== 0) { 
    span.addClass('something').css({ 
     width: $(this).outerWidth() + 'px', 
     right: w[i-1] + 'px' 
    }); 
    } 

    return span; 
}).get();

来源

2013-05-15 12:09:29 Sacha

更好 - 我会放弃这一点。 – verism

不幸的是，有一个问题：未捕获TypeError：对象文本没有方法'css' – verism

@verism我不好，你必须将span变量包装在一个jQuery对象中：'var span = $（''+ $ this）.text（）+''）; – Sacha

怎么样更多的东西像这样的跨度？

var array = $('table').find('th').map(function(i){ 

    var element = $("<span></span>").text($(this).text()); 
    return (i === 0) ? element : element.css({"width": $(this).outerWidth() + "px" 
               , "display": "inline-block" 
               , "position": "absolute" 
               , "right": w[i-1] + "px"}); 

}).get();

来源

2013-05-15 12:13:54 Klors

构建具有可读性和维护性的HTML元素

回答

相关问题