Question

我很少重复jQuery脚本，我将其合并为一个以获得更好的性能，但我仍然不满意，我相信有更简单的方法可以做到这一点。

$(document).ready(function(){
$('div.wrap-around1 *').addClass('outer1');
$('div.outer1').wrapAll('<div class="frame-h" />');
$('div.wrap-around2 *').addClass('outer2');
$('div.outer2').wrapAll('<div class="frame-v" />');
$('div.wrap-around3 *').addClass('outer3');
$('div.outer3').wrapAll('<div class="frame-v" />');
$('div.wrap-around4 *').addClass('outer4');
$('div.outer4').wrapAll('<div class="frame-b" />');
});

Answer 1

通用选择器*在JS中使用时速度很慢（在CSS中不多）。所以你可能会使用一些正确的选择器，类或其他东西（不能说没有任何HTML样本或深入描述）。

但您的代码可以重构为：

从班级中提取号码
将号码映射到h, v, b个字符

＆＃13;

const num2Frame = {1:"h", 2:"v", 3:"v", 4:"b"}; // map class num to frame char


jQuery(function ($) { // DOM ready and $ alias secured

  $("[class^='wrap-around'], [class*=' wrap-around']").each(function() {
  
       // extract number from className
       const num = (this.className.match(/wrap-around(\d+)/)||'')[1];
       if (!num) return;
       $(this).find("*")  //instead of * use a specific selector
           .wrapAll(`<div class="frame-${num2Frame[num]}" />`)
           .addClass('outer'+ num); 
  });

});

＆＃13;

.outer1{color: green;}
.outer2{color: gold;}
.outer3{color: gold;}
.outer4{color: red;}

.frame-h{ border: 1px solid green; }
.frame-v{ border: 1px solid gold; }
.frame-b{ border: 1px solid red; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="asd wrap-around1 qwe sdfg"><p>1</p></div>

<div class="asd wrap-around2 qwe sdfg"><p>2</p></div>

＆＃13;

完全改进将重构您的选择器和HTML并使用正确的工具来完成工作：

＆＃13;

const num2Frame = {1:"h", 2:"v", 3:"v", 4:"b"}; // map class num to frame char


jQuery(function ($) { // DOM ready and $ alias secured

  $("[data-wrap]").each(function() {
       const num = $(this).data("wrap");
       $(this).children()
           .wrapAll(`<div class="frame-${num2Frame[num]}" />`)
           .addClass('outer'+ num); 
  });

});

＆＃13;

.outer1{color: green;}
.outer2{color: gold;}
.outer3{color: gold;}
.outer4{color: red;}

.frame-h{ border: 1px solid green; }
.frame-v{ border: 1px solid gold; }
.frame-b{ border: 1px solid red; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-wrap="1"><p>1</p></div>
<div data-wrap="2"><p>2</p></div>

＆＃13;

将多个小jQuery脚本合并为一个

1 个答案: