jQuery-Anweisungen kürzer machen

Question

Ich habe die folgende jQuery-Anweisung, die gut funktioniert, aber ich fragte mich, ob es verkürzt werden könnte und wenn es prägnanter würde die Leistung beschleunigen oder nicht?

Der Grund für die seltsame Start-Tag ist, dass es für ein Wordpress-Thema ist.

Prost im Voraus!

jQuery(document).ready(function($) { 

$(".sidebar ol#navigation li.work a").click(function() { 
$("#content #second_nav").toggle("fast"); 
$("#content #second_nav ul.options_3").css('display','none'); 
$("#content #second_nav ul.options_2").css('display','none'); 
$("#content #second_nav ul.options_4").css('display','none'); 
$('.active_2').removeClass('active_2'); 
$('.active').removeClass('active'); 
$(this).toggleClass('selected'); 
}); 

$("#content #second_nav ul.options li a#work").click(function() { 
    $('.active').removeClass('active'); 
    $(this).attr('class','active'); 
    $("#content #second_nav ul.options_2").toggle("fast"); 
    $("#content #second_nav ul.options_4").css('display','none'); 
    $("#content #second_nav ul.options_3").css('display','none'); 
    }); 

$("#content #second_nav ul.options li a#writing").click(function() { 
    $('.active').removeClass('active'); 
    $(this).attr('class','active'); 
    $("#content #second_nav ul.options_4").toggle("fast"); 
    $("#content #second_nav ul.options_3").css('display','none'); 
    $("#content #second_nav ul.options_2").css('display','none'); 
    $('.active_2').removeClass('active_2'); 
    }); 

$("#content #second_nav ul.options_2 li a#collage").click(function() { 
    $('.active_2').removeClass('active_2'); 
    $('ul.options_3').css('display','none'); 
    $(this).attr('class','active_2'); 
    $("#content #second_nav ul.options_3#collage").toggle("fast"); 
    }); 

$("#content #second_nav ul.options_2 li a#painting").click(function() { 
    $('.active_2').removeClass('active_2'); 
    $('ul.options_3').css('display','none'); 
    $(this).attr('class','active_2'); 
    $("#content #second_nav ul.options_3#painting").toggle("fast"); 
    }); 

$("#content #second_nav ul.options_2 li a#print").click(function() { 
    $('.active_2').removeClass('active_2'); 
    $('ul.options_3').css('display','none'); 
    $(this).attr('class','active_2'); 
    $("#content #second_nav ul.options_3#print").toggle("fast"); 
    }); 

$("#content #second_nav ul.options_2 li a#photo").click(function() { 
    $('.active_2').removeClass('active_2'); 
    $('ul.options_3').css('display','none'); 
    $(this).attr('class','active_2'); 
    $("#content #second_nav ul.options_3#photo").toggle("fast"); 
    }); 

}); 

Answer 1

Aus Performance-Gründen:

1. es beste ID zu verwenden und KLASSEN mit möglichst wenigen Knoten im Selektor wie möglich. Wenn Sie eine ID verwenden, geben Sie das Tag nicht an. So $('#myId'); ist viel schneller als $('a#myId');, da es das native Javascript getElementById() verwendet. Wenn Sie das Tag angeben, greift es auf komplexere Auswahlstrategien zurück. Außerdem soll die ID im DOM eindeutig sein, also anstelle von $("#content #second_nav ul.options_2 li a#photo")$("#photo"); verwenden. Je kürzer, desto schneller, desto besser.

2. Cache Ihre ausgewählten DOM-Elemente, wenn Sie beabsichtigen, sie mehr als einmal zu verwenden:

   var secondNav= $("#content #second_nav"); 
   secondNav.toggle("fast"); 
   

3. Für Prägnanz Sie mehrere Elemente in der Auswahl angeben können, wenn sie die gleiche Operation teilen. Zum Beispiel:

   var secondNav = $("#content #second_nav"); 
   secondNav.toggle("fast"); 
   $("ul.options_3, ul.options_2, ul.options_4",secondNav).hide(); 
   $('.active_2').removeClass('active_2'); 
   $('.active').removeClass('active'); 
   $(this).toggleClass('selected'); 
   

Hope this helps ...

Answer 2

Es gibt ein paar Dinge zu tun. Am offensichtlichsten ist es, Variablen zu verwenden.

var $option2 = $("#content #second_nav ul.options_2"); 
var $option3 = $("#content #second_nav ul.options_3"); 
var $option4 = $("#content #second_nav ul.options_4"); 

Sie können dann sub in den Variablen, wo immer Sie diese lange Auswahl haben.

$option2.css('display', 'none'); 
$option3.css('display', 'none'); 
$option4.css('display', 'none'); 

Sollte mit Leistung, Readability und Duplizierung helfen.

Answer 3

$ ("# Inhalt #second_nav ul.options_3"). Css ('display', 'none'); $ ("# content #second_nav ul.options_2"). Css ('display', 'none');

== $ ("# content #second_nav"). Find ("ul.options_3, ul.options_2"). Css ('display', 'none');