В коде Jquery я хочу назначить много разных селекторов каждому текстовому значению через массивы, .each, index, variable

Question

У меня есть функциональный код:

  $(".A1").text("10");  
  $(".A2").text("20");  
  $(".A3").text("30");

, но на моем функциональном веб-сайте так много классов, например, до

$(".A80").text("800");

Я хочу упростить этот код с помощью двух массивов с переменные, где один массив - это классы ... а второй массив состоит из текстовых значений ..., теперь у меня нефункциональный код:

var Pw = [".A1",".A2",".A3"];  
var index, len;  
var a = ["10", "20", "30"];  
for (index = 0, len = a.length; index < len; ++index) {             
    $.each(Pw, function(fn){   
        $(Pw[fn]).text(a[index]);  
    });  
}

в этом коде только одно значение

("30")

назначается всем трем классам

".A1",".A2",".A3",

Я хочу назначить

10 to A1      
20 to A2      
30 to A3

Но все же я хочу иметь два массива (а не только один массив) - один для текстового значения , второй по классам ... Кто-нибудь может помочь?

Answer 1

Сохраняйте ваши селекторы в виде строки, охватывающей все соответствующие цели. Использование массива ограничено по сравнению с селекторами. Если вы выполняете итерацию по объекту jQuery (например, $(selector)), используйте приращение, чтобы присвоить каждому номер.

Вот плагин jQuery, который можно использовать повторно. Ниже приведена подпись (пример того, как ее использовать):

$(selector).serialText(increment, startIncrement = 1);

Применяется к ситуации, предоставленной OP:

$('[class^="A"]').serialText(10)

// selector: $(Any element that has a [class that starts with: ^="A"])
// .serialText(..., ...)
// increment: 10
// incrementStart: if not included then the default is used: 1

В качестве плагина jQuery вы можете связать другие методы:

$('[class^="A"]').serialText(10).css('color', 'red');

Кстати, не пытаюсь обидеть, но многие классы кажутся чрезмерно ненужными. Вероятно, вы сможете достичь своей цели, используя идентичные классы.

---

Демо

$.fn.serialText = function(number, start = 1) {
  $(this).each(function(i) {
    let pattern = (i + start) * number;
    $(this).text(pattern);
  });
  return this;
}

$('[class^="A"]').serialText(10).css('color', 'red');

<section class='A1'></section>
<section class='A2'></section>
<section class='A3'></section>
<section class='A4'></section>
<section class='A5'></section>
<section class='A6'></section>
<section class='A7'></section>
<section class='A8'></section>
<section class='A9'></section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Вы можете просто использовать Array.forEach для итерации массива Pw, установив элемент, описанный селектором, на соответствующее текстовое значение из a:

var Pw = [".A1",".A2",".A3"];  
var a = ["10", "20", "30"];

Pw.forEach((c, i) => $(c).text(a[i]));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="A1"></div>
<div class="A2"></div>
<div class="A3"></div>