使用javascript遍歷跨度

僅使用Javascript，如何遍歷每個跨度id =「expiredDate」？我認爲這對於每個循環來說都會很容易，但它似乎並不存在於JavaScript中。我的下面的代碼只適用於第一個元素。使用javascript遍歷跨度

<script type="text/javascript"> 
window.onload = function() { 
    var definedDate = window.document.getElementById('expiredDate').innerHTML.split("-"); 
    var expiredDate = new Date(definedDate[0], definedDate[1] - 1, definedDate[2]); 
    var graceDate = new Date(definedDate[0], definedDate[1] - 1, definedDate[2] - 30); 
    var currentDate = new Date(); 

    if(currentDate > expiredDate) {document.getElementById('expiredDate').style.color = '#cc6666';} 
    else if(currentDate < expiredDate && currentDate > graceDate) {document.getElementById('expiredDate').style.color = '#f0c674';} 
    else {document.getElementById('expiredDate').style.color = '#b5bd68';} 
} 
</script> 
<span id="expiredDate">2013-01-01</span> 
<span id="expiredDate">2014-01-01</span> 
<span id="expiredDate">2015-01-01</span>

來源

2012-12-12 bswinnerton

如果您需要有效的html，應該只有一個''span''''expiredDate''。 – Kyle

@凱爾 - 足夠公平，這可以用類來完成嗎？ – bswinnerton

*應該*與類 – Jason

切換您的ID，以類和嘗試尚未下面說

var spans = document.getElementsByTagName('span'); 
var l = spans.length; 
for (var i=0;i<l;i++) { 
    var spanClass = spans[i].getAttribute("class"); 
    if (spanClass === "expiredDate") { 
     /*do stuff to current spans[i] here*/ 
    } 
}

來源

2012-12-12 17:35:37 Jason

[類屬性]（http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-class）是一個空格分隔的列表。如果跨度有類expiredDate和其他東西，你的例子會發生什麼？要檢查課程是否屬於列表的一部分，您應該查找'（''+ spanClass +''）.indexOf（''+'expiredDate'+''）！== -1;' –

取決於您定位的瀏覽器版本。請參閱caniuse的document.getElementsByClassName。根據您的範圍，您也可以使用document.getElementsByTagName並進行迭代。或者使用XPath或jQuery。

來源

2012-12-12 17:27:21 ryan

兩種方法;兩個你應該使用的形式

<span class="expiredDate">...</span>

1. .querySelectorAll方法：

var result = document.querySelectorAll('span.expiredDate'); // NodeList

.getElementsByClassName 2.用Array.prototype.filter

var result = Array.prototype.filter.call(
       document.getElementsByClassName('expiredDate'), 
       function (elm) { return elm.tagName === 'SPAN'; } 
      ); // Array

方法1是速度快，但由於組合你已經用方法2遍歷它們，你可以稍後保存一個循環將您期望的操作放入過濾器的功能中，從而使整體速度更快。

來源

2012-12-12 17:49:27

如果我要使用方法1，第3行會變成：'var definedDate = document。 querySelectorAll（ 'span.expiredDate'）innerHTML.split（「 - 」）;'？ – bswinnerton

不，[_NodeList_]（https://developer.mozilla.org/en-US/docs/DOM/NodeList）與_Array_幾乎相同，您可以使用某個循環變量循環結果，比如說'我'，並做'var definedDate = result [i] .innerHTML.split（「 - 」）;' –

我在方法2中討論的'保存一個循環'是在建立'elm.tagName === 'SPAN'（即使用'if'不是'return'），用'elm'完成你想要的。這與Jason的方式非常相似，除了_class然後是span_，而不是_span然後class_。 –

使用javascript遍歷跨度

回答

相關問題