CODEWITHSUNDEEP
jquery
The Sethness
The Sethness

Reputation: 1

jquery implementation for browser compatibility issues

I want to set the display value to block for all <td> with class .subjectGroupCompare and the rest to 'none'. Been trying all day -eek. Seems like should be simple. 

$("#SFGPage").children("table").eq(1).find("td").each(function() {
   var $td = $(this);
   if ($(".subjectGroupCompare")[0]) { 
       $td.css("display", "block"); 
   } else { 
       $td.css("display", "none");
   }
});

Upvotes: 0

Views: 105

Answers (4)

Thomas W
Thomas W

Reputation: 14164

Why not let jQuery do more of the work? The code is cleaner & it places the opportunity for optimization with jQuery, where it's more likely to be optimized/ hotspotted, rather than you writing an loop & 'if' condition manually.

Something like this:

var table = $("#SFGPage").children("table").eq(1);
var tds = table.find("td");
tds.filter( ".subjectGroupCompare").css( "display", "block");
tds.not(    ".subjectGroupCompare").css( "display", "none");

As @ehdv says, there may be issues setting display:block on table cells. You can investigate those issues & adapt the solution yourself.

Upvotes: 0

kashimu
kashimu

Reputation: 174

I depend my selector to your code so if you want to display block/none the td you can try this

this will hide all td that has no class .subjectGroupCompare

$("#SFGPage").children("table").eq(1).find("td:not(.subjectGroupCompare)").css("display", "none");

display all with class .subjectGroupCompare

$("#SFGPage").children("table").eq(1).find("td.subjectGroupCompare").css("display", "block");

i think you can also used .hide() or .show()

Upvotes: 0

Martin.
Martin.

Reputation: 10529

You've got your if statement wrong.

You have to check whether the specific node has that subjectGroupCompare class. You can check it with 

$td.hasClass("subjectGroupCompare")

so in final, your code would look like this

$("#SFGPage").children("table").eq(1).find("td").each(function() {
   var $td = $(this);
   if ($td.hasClass("subjectGroupCompare")) { 
       $td.css("display", "block"); 
   } else { 
       $td.css("display", "none");
   }
});

Upvotes: 1

The Alpha
The Alpha

Reputation: 146191

I think, you want to check if the $td has class subjectGroupCompare and if so then you need this 

if($td.hasClass('subjectGroupCompare')) {
    $td.css("display", "block"); 
}
else { 
   $td.css("display", "none");
}

Upvotes: 1

Related Questions