Reputation: 49
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
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