HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Optimize jQuery selectors code

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
codejqueryoptimizeselectors

Problem

I have this fiddle http://jsfiddle.net/L7zuT/ where I'm working on a small part of a big event program. The functionality is ok, the part of the problem would be the large JavaScript lines needed with the full event program. Is there any way to implement it with DRY (don't repeat yourself) or a better approach for a simpler way?


  
    13:00-14:30
    18.AAL Solution Deployment Seminar
      9. Results of the AALIANCE Network: Roadmap and more
      7. From    actimetry to ADL ,in the framework of remote medical monitoring of elderly    from living labs to the nursing home
      8. Interoperability APIs and LivingLabs for AAL
      10. Large scale deployment of AAL solutions based on Open    Platform: Challenge and perspectives
     
  
  
    14:30-16:00
      1.    User Forum and workshop for exergames in AAL
     
  
    
        16:00-17.30
        19.Deployment event - matchmaking session
         
    


CSS

tr {
    height: 1px;
}
td{
    height: 100%;
}
label{
    display: block; 
    min-height: 100%; /* for the latest browsers which support min-height */
    height: auto !important; /* for newer IE versions */
    height: 100%; /* the only height-related attribute that IE6 does not ignore  */
}
label:hover {
    cursor:pointer;
}


JS

```
$(document).ready(function(){
$("input[name='date_main01']").click(function() {
var test = $(this).val();
$("input[name='date_sub01']").prop('checked', false);
$("input[name='date_sub02']").prop('checked', false);
$("label[for*='date_main']").css("background", "none");
$("label[for*='date_sub']").css("background", "none");
$("label[for='date_main"+test+"']").css("background-color", "yellow");
});
$("input[name='date_sub01']").click(function() {
var test = $(this).val();
$("input[name$='date_main01']").prop('checked', false);
$("label[for*='date_main']").css("background", "none");
$("label[for='date_s

Solution

$("input[name='date_sub01']").prop('checked', false);
 $("input[name='date_sub02']").prop('checked', false);


Can be turned into:

$("input[name='date_sub01'], input[name='date_sub02']").prop('checked', false);


Also if you assign the selectors to a variable your code will be much faster:

var sub_01 = $("input[name='date_sub01']")


You never need to use the method .val().

If you do:

var test = this.value;


You will get the same results without accessing jQuery.

Since you are using background:none alot, you can keep it in an object:

noneBackground: {"background":"none"}


and pass it as an argument

$("label[for*='date_main']").css(noneBackground);

Code Snippets

$("input[name='date_sub01']").prop('checked', false);
 $("input[name='date_sub02']").prop('checked', false);
$("input[name='date_sub01'], input[name='date_sub02']").prop('checked', false);
var sub_01 = $("input[name='date_sub01']")
var test = this.value;
noneBackground: {"background":"none"}

Context

StackExchange Code Review Q#54370, answer score: 4

Revisions (0)

No revisions yet.