Question

仅使用Javascript，如何遍历每个span id =“expiredDate”？我认为这对于每个循环都很容易，但它似乎不存在于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>

Answer 1

将您的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*/
    }
}

Answer 2

尚未说出两种方法;两者都应该使用表格

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

1。 .querySelectorAll方法：

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

2。 .getElementsByClassName结合Array.prototype.filter

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

方法1更快，但因为你已经用方法2迭代它们，你可以稍后通过将你想要的动作放在过滤器的功能中来节省一个循环，从而使整体更快。

Answer 3

取决于您定位的浏览器版本。请参阅caniuse＆＃39; document.getElementsByClassName。根据您的范围，您还可以使用document.getElementsByTagName和iterate。或者使用XPath或jQuery。

使用javascript迭代跨度

3 个答案: