4

いくつかのテーブル セル データを反復処理するとき、見つかったものの配列を作成します。最初の反復では、見つかったテキストをいくつかのタグでラップするだけですが<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より「メンテナンスしやすい」ステートメントの書き方を提案できる人はいますか?

EDIT : コードは他の計算に基づいて値を適用するため、CSS クラスを使用することは実際には解決策ではありません。

4

2 に答える 2

4

コメントで既に提案されているように、CSS クラスのすべての要素で使用される値を保存することを検討して.somethingください。この例では選択します。

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

次に、jQuery では、span 要素のコピーを変数に格納できます。これは、両方の場合で使用するためです。ブロックではelse、クラスを適用して個々のスタイルを追加するだけです。

EDIT：コードをさらに簡素化できます。何が起こってもスパンを返すので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-15T12:09:29.180 に答える
0

もっとこういうのはどうですか？

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-15T12:13:54.103 に答える