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...

减少来自类或ID的冗余调用/查找

1 个答案: