jQuery数组语法中的html5画布

Question

我试图通过创建两个查询对象来重复代码，但不确定语法。任何帮助，将不胜感激

var headers = $("h2.page-header"); 
var nav = $("ul#nav-main li a.active"); 
var links = [headers, nav]; 

    links.each(function() { 
     var linkWidth = $(this).outerWidth(); 
     var canvas = $("<canvas></canvas>"); 
     canvas.attr({width: linkWidth, height: 48}); 
     var ctx = canvas.get(0).getContext("2d"); 

     ctx.save(); 
       ctx.beginPath(); 
       ctx.moveTo(linkWidth, 45.0); 
       ctx.lineTo(6.5, 46.3); 
       ctx.lineTo(0.0, 0.0); 
       ctx.lineTo(linkWidth-2, 2.0); 
       ctx.lineTo(linkWidth-4, 45.0); 
       ctx.closePath(); 
       ctx.fillStyle = "rgb(27, 73, 218)"; 
       ctx.fill(); 
       ctx.restore(); 

     var image = canvas.get(0).toDataURL("image/png"); 
     $(this).css({background: "url('"+image+"') no-repeat"}); 

    }); 

Answer 1

您只需你一个简单的CSS grouping selector：

var links = $("h2.page-header, ul#nav-main li a.active"); 

如果，如果你想保留两个选择单独使用.add() method：

var links = $("h2.page-header").add("ul#nav-main li a.active");