jQueryステートメントを短くする

Question

次のjQueryステートメントはうまく動作しますが、短縮できるかどうか、さらに簡潔にするとパフォーマンスが向上するかどうかは不思議でした。

奇妙な開始タグの理由は、ワードプレステーマのためです。

事前に乾杯！

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

パフォーマンス期すために：

1. ことが可能とセレクタのように、いくつかのノードとIDとクラスを使用することをベストです。 IDを使用する場合は、タグを指定しないでください。だから$('#myId');は、$('a#myId');よりもはるかに高速で、ネイティブのjavascript getElementById()を使用しています。タグを指定すると、より複雑な選択戦略に頼ります。また、IDはDOM内で一意であると仮定されているため、$("#content #second_nav ul.options_2 li a#photo")の代わりに$("#photo");を使用してください。短く、速く、良い。

2. キャッシュ選択したDOM要素は、あなたがそれらを複数回使用する場合：彼らは同じ操作を共有している場合

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

3. は簡潔のために、あなたは、セレクタ内のいくつかの要素を指定することができます。例えば：...

   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'); 
   

は、この情報がお役に立てば幸い

Answer 2

行うにはいくつかあります。最も明白なのは、変数を使うことです。

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

このようなロングセレクタを使用している場合は、いつでも変数に含めることができます。

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

パフォーマンス、可読性、および複製に役立ちます。

Answer 3

$（ "＃content #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'）;