jQuery计数tr在td中有一些条件

Question

我有一个包含6个以上表行的表。每个tr包含6个td。 每个td都有data-name属性：completed或not completed。

我需要检查哪个tr有td个data-name属性设置为completed。

如果该行有5个已完成td的设置，那么tr应为绿色。

HTML

<table id="workflowviz">
    <tr class="row">
        <td data-name="step1">0</td>
        <td data-name="stage: completed ">1</td>
        <td data-name="stage: completed ">2</td>
        <td data-name="stage: completed ">3</td>
        <td data-name="stage: completed ">4</td>
        <td data-name="stage: completed ">5</td>
    </tr>
    <tr class="row">
        <td data-name="step2">0</td>
        <td data-name="stage: completed">1</td>
        <td data-name="stage: not completed">2</td>
        <td data-name="stage: not completed">3</td>
        <td data-name="stage: not completed">4</td>
        <td data-name="Sub Stage: New ">5</td>
    </tr>
</table>

JS

我已根据data-name属性为第一行编写了以下代码。但是希望避免在jQuery循环中为每一行执行此操作。

$(document).ready(function(){
    step1 = ($("td[title |='step1']")
                .parents()
                .children("td[title |='stage: completed']").length);

    //alert("Num of step1= "+step1);

    if(step1 == 5 ) {  

        // alert("Step 1 Done");
        $("td[title |='step1']")
            .parents()
            .addClass("done_colorgreen");
    }
    else {}
});

Answer 1

您可以使用filter获取每行td个completed个元素的数量。试试这个：

$('#workflowviz tr').each(function() {
    var $tr = $(this);
    var $tds = $tr.find('td').filter(function() {
        return $(this).data('name') == 'stage: completed ';
    });
    if ($tds.length == 5) {
        $tr.addClass('green');
    }
});

Example fiddle

然后，您只需在CSS中设置.green类，即可将该特定tr元素的背景设为绿色。

Answer 2

我使用你的代码为你创建了一个jsFfiddle ..

代码： -

$(document).ready(function() {
     $("table tr").each(function() {
         if ($(this).find("td[data-name='stage: completed ']").length == 5)
             $(this).addClass("green")
     })
 });

并且它的表现也很好..

工作示例： - http://jsfiddle.net/BtkCf/172/

要查看其性能，请参阅此链接并打开控制台查看此代码所用的时间。 http://jsfiddle.net/BtkCf/173/

感谢