减少来自类或 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...