Zeosing
Zeosing

Reputation: 49

Check if all table td´s hasclass and then do something

Table:

<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();
                }
            });
        })
});

});

We need to check if all td hasclass "up" (in tbody) and if yes fadein a div, if not all the div´s hassclass "up" we need to do another action. The main problem is the code we made is if a td hasclass "up" then it performs the action and this is not we need.

Thanks for the help.

Upvotes: 0

Views: 536

Answers (1)

adeneo
adeneo

Reputation: 318202

You can get all TD's, then filter out all elements with the .up class, if you get the same number of elements, all of them have that class

$(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) { ... });
});

Upvotes: 2

Related Questions