jquery - jQueryが表のセルで変数を正しく比較していない

Question

次のようなテーブルがあります。

<table id="comparison">
    <tr>
        <th>Hotels</th>
        <th>Jan 2013</th>
        <th>Feb 2013</th>
    </tr>
    <tr>
        <td>Lorem Ipsum Hotel</td>
        <td>
            <div class="rooms">165</div>
            <div class="sob">352</div>
        </td>
        <td>
            <div class="rooms">215</div>
            <div class="sob">30</div>
        </td>
    </tr>
</table>

各セルの部屋と SOB を比較するために、この jQuery スクリプトを用意しました。
- SOB が部屋よりも少ない場合、SOB を赤く着色して否定的な結果を示します。
- SOB が部屋よりも大きい場合は、SOB を緑に色付けして肯定的な結果を示します。

$('#comparison td .sob').each(function() {
    var rooms = $(this).prev().text();
    var sob = $(this).text();
    if (rooms > sob) {
        $(this).css({'color': 'red'});
    } else {
        $(this).css({'color': 'green'});
    }
});

問題は、このスクリプトが部屋と SOB を正しく比較していないことです。変数の比較でランダムに実行されているようで、正しい結果が得られる場合とそうでない場合があります。

私は何が欠けていますか？

Answer 1

数値ではなく、テキスト値を比較に使用しています。

次の 2 行を置き換えてみてください。

var rooms = $(this).prev().text();
var sob = $(this).text();

これとともに：

var rooms = parseInt($(this).prev().text(),10); // always use a radix
var sob = parseInt($(this).text(),10);

別の注意点として、可能であれば、ページ出力を生成するコードに css クラスを追加することをお勧めします (もちろん、HTML コンテンツが動的に生成されることも前提です)。

Answer 2

テキストをintに解析する必要があると思います：

$('#comparison td .sob').each(function() {
  var rooms = Math.floor($(this).siblings().text());
  var sob = Math.floor($(this).text());
  if (rooms > sob) {
    $(this).css({'color': 'red'});
  } else {
    $(this).css({'color': 'green'});
  }
});

Math.floor()：私はどこかでパフォーマンスがかなり速いことを読みましたparstInt()

Answer 3

これを試して

$('#comparison td .sob').each(function() {
    var rooms = Number($(this).prev().html());
    var sob = Number($(this).html());
    if (rooms > sob) {
        $(this).css({'color': 'red'});
    } else {
        $(this).css({'color': 'green'});
    }
});

Answer 4

これを試して、

var rooms = parseInt($(this).siblings('.rooms').text());