クラスまたはIDからの冗長なコール/ルックアップの軽減

Question

悪いタイトルまたは質問のお詫び。しかし、わかりやすくするために、ここではヘッダーを複数回呼び出すコードを用意しています。以下の変数は、複製する要素を指定します。これは#header a[href=$="programs"]です。 ID #headerは、コードの一部で複数回呼び出されます。手動で追加する代わりに、コードを一度呼び出してコードの一部に挿入する方法はありますか？私はまだjavascriptに新しいです。

私はプログラミングに関する理解が不足しているにもかかわらず、それをうまく説明できたらいいと思います。

var programsMenu = []; 
     programsMenu.push($('#header a[href$="/programs"]').clone()); 
     programsMenu.push($('#header a[href$="/programs"]').next().clone()); 


    var degreesMenu = []; 
     programsMenu.push($('#header a[href$="/programs"]').clone()); 
     degreesMenu.push($('#header a[href$="/degree-programs"]').clone()); 
     degreesMenu.push($('#header a[href$="/degree-programs"]').next().clone()); 

---

(function ($) { 
    'use strict'; 


    var footerNavigation = { 
     init : function() { 

      var programsMenu = []; 
       programsMenu.push($('#header a[href$="/programs"]').clone()); 
       programsMenu.push($('#header a[href$="/programs"]').next().clone()); 


      var degreesMenu = []; 
       programsMenu.push($('#header a[href$="/programs"]').clone()); 
       degreesMenu.push($('#header a[href$="/degree-programs"]').clone()); 
       degreesMenu.push($('#header a[href$="/degree-programs"]').next().clone()); 

      $('#footer .programs-menu .degree').append(degreesMenu); 

      var nonDegreeMenu = []; 
       nonDegreeMenu.push($('#header a[href$="/executive-education-programs"]').clone()); 
       nonDegreeMenu.push($('#header a[href$="/development-education-programs"]').clone()); 
       nonDegreeMenu.push($('#header a[href$="/program-schedules"]').clone()); 

      $('#footer .programs-menu .non-degree').append(nonDegreeMenu); 

      var schoolMenu = []; 
       schoolMenu.push($('#header a[href$="/schools"]').clone()); 
       schoolMenu.push($('#header a[href$="/schools"]').next().clone()); 

       $('#footer .schools-faculty-menu .schools').append(schoolMenu); 


      var facultyMenu = []; 
       facultyMenu.push($('#header a[href$="/faculty-and-staff"]').clone()); 
       facultyMenu.push($('#header a[href$="/faculty-and-staff"]').next().clone()); 

       $('#footer .schools-faculty-menu .faculty').append(facultyMenu); 

      // var researchMenu = []; 
      //  researchMenu.push($('a[href$="/research-centers"]').clone()); 
      //  researchMenu.push($('a[href$="/research-centers"]').next().clone()); 

      var researchCenters = $('#header a[href$="/research-centers"]').next().clone(), 
       centersList  = $('li', researchCenters), 
       research   = $('#footer .research-centers-menu .research'), 
       publications  = $('#footer .research-centers-menu .publications'), 
       publicationsMenu = $('<ul class="menu" />').appendTo(publications), 
       researchMenu  = $('<ul class="menu" />').appendTo(research), 
       centers   = centersList.slice(0, 6), 
       resources  = centersList.slice(6); 

      //Store Research anchor and AIM Research Centers 
      var aimResearchCenters = []; 
       aimResearchCenters.push($('#header a[href$="/research-centers"]').clone()); 
       aimResearchCenters.push($(researchMenu.append(centers))); 

      //Append aimResearch array 
      $('#footer .research-centers-menu .research').append(aimResearchCenters); 

      publicationsMenu.append(resources); 


      /* 
      $('#footer .research-centers-menu .research').append(centers); 
      $('#footer .research-centers-menu .publications').append(resources); 
      */ 


      var aboutMenu = []; 
       aboutMenu.push($('a[href$="/about-us"]').clone()); 
       aboutMenu.push($('a[href$="/about-us"]').next().clone()); 

      $('#footer .about-menu .about').append(aboutMenu); 


      //Duplicate Breadcrumns on header and insert it on footer 
      var breadcrumbs = $('.region-breadcrumb').clone(); 
      $('.region-breadcrumb').clone().insertAfter('#footer .footer-head'); 
     } 
    } 

    $(document).ready(function() { 
     footerNavigation.init(); 
    }) 

})(jQuery); 

Answer 1

あなたはjQueryの要素を運ぶために変数を使用することができます。

これは、コードを短くしてより読みやすくすることができるだけでなく...
また、ドキュメント上のjQueryルックアップを減らして要素を見つけ、コードをより効率的にします。

のように：私は私が推測するより多くの機能を考えていた代わりに変数を使用する方法について考えているが

var programs = $('#header a[href$="/programs"]'); 
var degrees = $('#header a[href$="/degree-programs"]'); 
var schools = $('#header a[href$="/schools"]'); 

// and so on...