javascript - 检查所有表 td 是否都有类，然后执行某些操作

Question

表:

<table class="table">
                    <thead>
                        <tr><th></th>
                    </tr></thead>
                    <tbody>

                    <tr class="statusdiv"><td colspan="2" class="location">General<span class="continent pull-right">Norte América</span></td><td class="up text-success text-center"><i class="icon-chat-1"></i></td><td class="up text-success text-center"><i class="icon-chat-2"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-1"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-2"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-1"></i></td></tr><tr class="statusdiv"><td colspan="2" class="location">New York<span class="continent pull-right">Norte América</span></td><td class="up text-success text-center"><i class="icon-chat-1"></i></td><td class="up text-success text-center"><i class="icon-chat-2"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-1"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-2"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-1"></i></td></tr><tr class="statusdiv"><td colspan="2" class="location">Florida<span class="continent pull-right">Norte América</span></td><td class="down text-danger text-center"><i class="icon-chat-1"></i></td><td class="down text-danger text-center"><i class="icon-chat-2"></i></td>
      <td class="down text-danger text-center"><i class="icon-chat-1"></i></td>
      <td class="down text-danger text-center"><i class="icon-chat-2"></i></td>
      <td class="down text-danger text-center"><i class="icon-chat-1"></i></td></tr><tr class="statusdiv"><td colspan="2" class="location">Texas<span class="continent pull-right">Norte América</span></td><td class="down text-danger text-center"><i class="icon-chat-1"></i></td><td class="down text-danger text-center"><i class="icon-chat-2"></i></td>
      <td class="down text-danger text-center"><i class="icon-chat-1"></i></td>
      <td class="down text-danger text-center"><i class="icon-chat-2"></i></td>
      <td class="down text-danger text-center"><i class="icon-chat-1"></i></td></tr><tr class="statusdiv"><td colspan="2" class="location">California<span class="continent pull-right">Norte América</span></td><td class="up text-success text-center"><i class="icon-chat-1"></i></td><td class="up text-success text-center"><i class="icon-chat-2"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-1"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-2"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-1"></i></td></tr><tr class="statusdiv"><td colspan="2" class="location">Georgia<span class="continent pull-right">Norte América</span></td><td class="up text-success text-center"><i class="icon-chat-1"></i></td><td class="up text-success text-center"><i class="icon-chat-2"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-1"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-2"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-1"></i></td></tr><tr class="statusdiv"><td colspan="2" class="location">México<span class="continent pull-right">Norte América</span></td><td class="up text-success text-center"><i class="icon-chat-1"></i></td><td class="up text-success text-center"><i class="icon-chat-2"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-1"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-2"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-1"></i></td></tr><tr class="statusdiv"><td colspan="2" class="location">Virginia<span class="continent pull-right">Norte América</span></td><td class="up text-success text-center"><i class="icon-chat-1"></i></td><td class="up text-success text-center"><i class="icon-chat-2"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-1"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-2"></i></td>
      <td class="up text-success text-center"><i class="icon-chat-1"></i></td></tr><tr class="statusdiv"><td colspan="2" class="location">Illinois<span class="continent pull-right">Norte América</span></td><td class="down text-danger text-center"><i class="icon-chat-1"></i></td><td class="down text-danger text-center"><i class="icon-chat-2"></i></td>
      <td class="down text-danger text-center"><i class="icon-chat-1"></i></td>
      <td class="down text-danger text-center"><i class="icon-chat-2"></i></td>
      <td class="down text-danger text-center"><i class="icon-chat-1"></i></td></tr> </tbody>
                </table>

Jquery:

jQuery(window).bind("load", function() {
var table = jQuery('#status-table tbody');
jQuery.ajax({
    url: "status.php",
    success: function(){

    },
    error: function (){
        alert("error")
    }
    }).done(function(html){
        table.append(html).queue(function(){
            jQuery('#status-table tbody tr td').each(function() {
                if(jQuery(this).hasClass('up')) {
                    jQuery('#m-hero-status-message').find('h1.m-ok').fadeIn();
                }
            });
        })
});

});

我们需要检查是否所有 td hassclass“up”(在 tbody 中)，如果是，则淡入 div，如果不是所有 div 的 hassclass“up”，我们需要执行另一个操作。主要问题是我们编写的代码是如果 td 具有“up”类，那么它会执行该操作，但这不是我们需要的。

感谢您的帮助。

Answer 1

你可以得到所有的TD，然后过滤掉所有带有.up类的元素，如果你得到的元素数量相同，那么它们都具有该类

$(window).on("load", function() {
    var table = $('#status-table tbody');
    $.ajax({
        url: "status.php"
    }).done(function(html) {
        table.append(html);

        var td = table.find('tr td'),
            up = td.filter('.up');

        if ( td.length === up.length ) { // all TD's have the class .up
            $('#m-hero-status-message').find('h1.m-ok').fadeIn();
        }
    }).fail(function(error) { ... });
});