構建具有可讀性和維護性的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元素

回答

相關問題