0

Javascript のみを使用して、すべてのスパン id = "expiredDate" を反復処理するにはどうすればよいですか? これは for each ループで非常に簡単だと思いますが、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>
4

3 に答える 3

5

Switch your IDs to classes and try the following

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-12T17:35:37.337 に答える
2

まだ語られていない 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 を使用して既に反復処理を行っているため、目的のアクションをフィルターの関数内に配置することで後でループを回避でき、全体的に高速になります。

于 2012-12-12T17:49:27.360 に答える
0

ターゲットにしているブラウザーのバージョンによって異なります。caniuse のdocument.getElementsByClassNameを参照してください。スコープによっては、document.getElementsByTagName を使用して反復することもできます。または、XPath または jQuery を使用します。

于 2012-12-12T17:27:21.520 に答える