需要使用JavaScript在HTML頁面上記錄某些項目

Question

Storytime。

所以，我有這樣的HTML代碼：

<tr valign="top" class=""> 
    <td class="col-status status-yellow">&nbsp;</td> 
    <td class="col-chk"><input name="ctl00" type="checkbox" class="checklistitem" title="Not Applicable" value="40" /></td> 
    <td class="col-chk"><input name="ctl00" type="checkbox" class="checklistitem" title="Fixed" value="40" /></td> 
    <td class="col-chk"><input name="ctl00" type="checkbox" class="checklistitem" title="OK" value="40" /></td> 
    <td class="col-flag flag-red"><input name="ctl00" type="hidden" id="ctl00" value="True" /></td> 
    <td class="col-question">8 (40).<a href="#" onclick="ChecklistNavigate('photos');return false;">link</a> <a href="#" onclick="showComments('40', 'ctl00');return false;">notes</a><input name="ctl00" type="hidden" id="ctl00" /></td> 
</tr> 

<tr valign="top" class=""> 
    <td class="col-status status-yellow">&nbsp;</td> 
    <td class="col-chk"><input name="ctl00" type="checkbox" class="checklistitem" title="Not Applicable" value="380" /></td> 
    <td class="col-chk"><input name="ctl00" type="checkbox" class="checklistitem" title="Fixed" value="380" /></td> 
    <td class="col-chk"><input name="ctl00" type="checkbox" class="checklistitem" title="OK" value="380" /></td> 
    <td class="col-flag flag-notset"><input name="ctl00" type="hidden" id="ctl00" value="True" /></td> 
    <td class="col-question">23 (380).<a href="#" onclick="ChecklistNavigate('photos');return false;">link</a> <a href="#" onclick="showComments('380', 'ctl00');return false;">notes</a><input name="ctl00" type="hidden" id="ctl00" /></td> 
</tr> 

<tr valign="top" class=""> 
    <td class="col-status status-yellow">&nbsp;</td> 
    <td class="col-chk"><input name="ctl00" type="checkbox" class="checklistitem" title="Not Applicable" value="20" /></td> 
    <td class="col-chk"><input name="ctl00" type="checkbox" class="checklistitem" title="Fixed" value="20" /></td> 
    <td class="col-chk"><input name="ctl00" type="checkbox" class="checklistitem" title="OK" value="20" /></td> 
    <td class="col-flag flag-red"><input name="ctl00" type="hidden" id="ctl00" value="True" /></td> 
    <td class="col-question">6 (20).<a href="#" onclick="ChecklistNavigate('photos');return false;">link</a> <a href="#" onclick="showComments('20', 'ctl00');return false;">notes</a><input name="ctl00" type="hidden" id="ctl00" /></td> 
</tr> 

嗯，這是唯一的代碼量小。這些塊中大約有100個（或者我稱之爲「問題」）。在上面的示例中，有3個問題：問題40,380和20.

我在尋找的是是標記問題的計數。在上面的例子中，有兩個標記的問題：40和20.這由「flag-red」屬性表示。我到目前爲止是：

var flaggedRed2 = document.getElementsByClassName("flag-red"); 
window.alert(flaggedRed2.length); 

而且這個工程。然而！現在，棘手的部分：我什麼真的尋找是一個標記問題的計數，但只從某些問題。例如，我不關心第40個問題（或者其他一些問題）。我想忽略那一個。我想窗口警報說：1.

這可能嗎？正如你所看到的，「flag-red」類沒有與它相關的問題號，就像每個「tr」中的其他類一樣。不幸的是，我無法將其添加到HTML代碼中。

預先感謝任何可能有所瞭解的人。

Answer 1

看看這裏，使用jQuery：http://jsbin.com/opesok/1/edit

代碼

var ignored = [40]; 
    //var ignored = [40, 20]; //another example 
    var redFlagTotal = 0; 

    $(".flag-red").each(function(){ 
    var re = /\((.*?)\)/; 
    var text = re.exec($(this).siblings(".col-question").text())[1]; 
    if(ignored.indexOf(parseInt(text)) < 0) 
     redFlagTotal++; 
    }); 
    alert("Tot: "+redFlagTotal) 

Answer 2

如果你想不jQuery的一個版本，我有一個的jsfiddle應該工作。

http://jsfiddle.net/BradleyStaples/dmvXM/注意

var rejectQuestions = function(flagged, rejections) { 

    var i = 0, 
     flaggedLength = flagged.length, 
     rejectionsLength = rejections.length, 
     n = 0, 
     questionNumber = null; 
    flagged2 = nodeListToArray(flagged); 

    for (i = 0; i < flaggedLength; i++) { 
     questionNumber = flagged[i].previousSibling.previousSibling.querySelector('input').value; 
     for (n = 0; n < rejectionsLength; n++) { 
      if (rejections[n] === questionNumber) { 
       flagged2.splice(i, 1); 
      } 
     } 
    } 

    return flagged2; 
}; 

var nodeListToArray = function(nodeList){ 
    var arry = [], 
     i = 0, 
     len = nodeList.length; 
    for (i = 0; i < len; i++) { 
     arry.push(nodeList[i]); 
    } 
    return arry; 
}; 

var flaggedQuestions = document.querySelectorAll('.flag-red'), 
    rejections = ['40'], 
    filteredQuestions = rejectQuestions(flaggedQuestions, rejections); 

console.log(filteredQuestions); 

一兩件事 - 返回的值是一個實際的數組，而不是一個節點列表，所以你必須考慮到這一點。