Javascript 如何最小化jQuery中的代码_Javascript_Jquery_Html_Minimize

Javascript 如何最小化jQuery中的代码

javascript jquery html

Javascript 如何最小化jQuery中的代码,javascript,jquery,html,minimize,Javascript,Jquery,Html,Minimize,这可能是一个奇怪的问题，但我在任何地方都没有找到解决办法。我的问题很简单，如何最小化/优化这样的代码？这可以通过一些函数或循环来实现。我不希望像这样的简单jQuery代码中有500行这样的代码 var span1w = $("span", panel1).width(); var span2w = $("span", panel2).width(); var span3w = $("span", panel3).width(); var span4w = $("span", panel4).wi

这可能是一个奇怪的问题，但我在任何地方都没有找到解决办法。我的问题很简单，如何最小化/优化这样的代码？这可以通过一些函数或循环来实现。我不希望像这样的简单jQuery代码中有500行这样的代码

var span1w = $("span", panel1).width();
var span2w = $("span", panel2).width();
var span3w = $("span", panel3).width();
var span4w = $("span", panel4).width();

var span1 = $("span", panel1);
var span2 = $("span", panel2);
var span3 = $("span", panel3);
var span4 = $("span", panel4);      

$(span1).css("margin-left", "-" + span1w / 2 + "px");
$(span2).css("margin-left", "-" + span2w / 2 + "px");
$(span3).css("margin-left", "-" + span3w / 2 + "px");
$(span4).css("margin-left", "-" + span4w / 2 + "px");

我的HTML就是这样，下面有一堆JS。我想做的是通过获取宽度并使用简单的css将span元素居中

<body id="body">
    <img src="images/logos2.png" alt="KOP-KA logo Martin Mali" class="logo">
    <div id="web" class="uk-grid uk-width-1-1">
        <div class="uk-width-1-4" id="panel1">
            <canvas class="canvas"></canvas>
            <span>SNAKE</span>
        </div>
        <div class="uk-width-1-4" id="panel2">
            <canvas class="canvas"></canvas>
            <span>APP</span>
        </div>
        <div class="uk-width-1-4" id="panel3">
            <canvas class="canvas"></canvas>
            <span>????</span>
        </div>
        <div class="uk-width-1-4" id="panel4">
            <canvas class="canvas"></canvas>
            <span>O KOP</span>
        </div>           
    </div>

我真的很喜欢新鲜、快速和简单的代码，它们工作得很好。

您可以使用

.css（）

回调函数。对集合中的每个元素调用一次回调。这意味着

css

在幕后迭代集合。在处理程序

中，此

关键字引用迭代的当前元素

$('.uk-grid > div').find('span').css('margin-left', function() {
    return "-" + $(this).width() / 2 + "px";
});

显示您的HTML以便我们可以比较和最小化代码？将

panel1

、

panel2

等设置为什么？您需要在循环中附加这些div（这非常有效，谢谢！现在我记起来了）。

$('.uk-grid > div').find('span').css('margin-left', function() {
    return "-" + $(this).width() / 2 + "px";
});