Question

当迭代一些表格单元格数据时，我构造了一个无处找到的数组。第一次迭代只是将找到的文本包装在一些<span>标签中，而后续的那些添加了一堆其他样式，如下所示：

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类并不是一个真正的解决方案，因为代码会根据其他计算应用值。

Answer 1

正如评论中已经建议的那样，考虑存储CSS类中所有元素使用的值，我将为此示例选择.something。

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

接下来，在jQuery中，您可以将span元素的副本存储在变量中，因为您将在两种情况下使用它。在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();

Answer 2

这样的事情怎么样？

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();

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

2 个答案: