javascript - 需要使用 JavaScript 统计 HTML 页面上的某些项目

Question

故事时间。

所以，我有这个 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 个这样的 block (或者我称之为“问题”)。在上面的示例中，有 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)