Jquery 每个 table 行的方程式

Question

我在使用下面的代码时遇到了一些问题，我对 jQuery 太陌生了，无法理解。

function calcExpiration(){
    var getState = jQuery( "#state" ).text();
    var getcalldate = jQuery( "#date" ).text();
    var date = new Date( getcalldate );
    if (getState == "KY" || getState == "IN"){
        date.setDate(date.getDate() + 30);
    }
    if (getState == "WV" || getState == "OH"){
        date.setDate(date.getDate() + 10);
    }
    var expmonth = date.getMonth()+1;
    var expdate = date.getDate();
    var expyear = date.getFullYear();
    jQuery( "#expiration" ).html( expmonth + "/" + expdate + "/" + expyear);
}
calcExpiration();

我在 table 中有多行信息，我想计算每一行的过期时间，上面的代码只适用于第一行。

Answer 1

我的第一个猜测是您使用 ID 不当。在 HTML 文档中，只有一个元素具有一个 ID，因此 jQuery('#expiration') 可能 return 只有第一个匹配元素，即使多个元素具有相同的 ID。

我建议您将 expiration 从 id 更改为 class。通常，使用 classes 而不是 id 作为 Jquery 句柄不会出错。

此外，我会想到一个更具描述性的名称。 .expiration 是通用的，使得上面的 Jquery 代码很难断章取义；也许像 .expiration_date_updatable 这样的东西会更令人回味？也许这是一个不好的例子，但总的来说，只要那些 class 与 Jquery 行为挂钩，就使用非常精确和描述性的 class 名称。为你代码的读者（包括你未来的自己）做这件事。

Answer 2

ID(#) 将始终适用于具有给定 id 的第一个元素，要使其适用于您应该使用 class(.) 的所有元素...下面是一个简单的示例

<p class="test-tag">Demo</p>
<p class="test-tag">Demo</p>
<p class="test-tag">Demo</p>
<p class="test-tag">Demo</p>
<p class="test-tag">Demo</p>
<a class="test">Btn1</a>
<a class="test">Btn2</a>
<a class="test">Btn3</a>
<a class="test">Btn4</a>

jQuery( '.test' ).click(function() {
    var time = jQuery.now();
    jQuery('.test-tag').empty().html(time);
});

Answer 3

我不是 jQuery 方面的专家，但您是否尝试过这样做来实现我认为您正在努力实现的目标？

HTML

<table>
<tr>
    <th>State</th>
    <th>Date</th>
    <th>Expiration</th>
</tr>
<tbody>
    <tr>
        <td>KY</td>
        <td>02-12-2015</td>
        <td></td>
    </tr>
    <tr>
        <td>IN</td>
        <td>01-20-2014</td>
        <td></td>
    </tr>
    <tr>
        <td>WV</td>
        <td>03-02-2014</td>
        <td></td>
    </tr>
    <tr>
        <td>OH</td>
        <td>04-05-2012</td>
        <td></td>
    </tr>
</tbody>

jQuery

$('table tbody tr:not(":first")').each(function (e) {
var state = $('td:eq(0)', this).text();
var getcalldate = $('td:eq(1)', this);
var dsplit = getcalldate.text().split("-");
var d=new Date(dsplit[2],dsplit[0],dsplit[1]-1);
var expDates = $('td:eq(2)', this);

var expmonth = d.getMonth() + 1;
var expdate = d.getDate();
var expyear = d.getFullYear();
var resultDate = expmonth + "-" + expdate + "-" + expyear

if (state == "KY" || state == "IN") {
    expDates.text(resultDate);
    d.setDate(d.getDate() + 30);
} else if (state == "WV" || state == "OH") {
    expDates.html(resultDate);
    d.setDate(d.getDate() + 10);
}

});

Jquery 每个 table 行的方程式

Jquery equation for each table row

each

jquery

row