jQuery:用.each定义一系列变量

Question

我正在寻找合适的方法来使用jQuery每个函数来定义一系列变量，而不是使用传统的javascript循环。

topic1 = $('.selector-circle').children('.selector-1').text();
topic2 = $('.selector-circle').children('.selector-2').text();
topic3 = $('.selector-circle').children('.selector-2').text();

最初，我编写了像上面这样的脚本，但是现在这个项目需要不同数量的“主题”和相应的text()，所以我需要代码是灵活的，而不是我最初使用的更硬编码的方法。

我知道如何在.each中为‘..selector 1’部分插入一个变量，每个索引都是"i“：

topic1 = $('.selector-circle').children('.selector-' + i).text();

但是，我不知道如何序列化"topic1“变量名，使其本质上成为”主题+ i“，无论每次运行多少次，然后将其绑定到每个”选择器+ i“。

似乎我需要一个数组来创建。

谢谢你，提前，为任何和所有有用的指示。

Answer 1

您可以简单地使用wildcard选择来选择您的所有子级。它是动态的，您不必管理单独的数组来跟踪元素。

<div class="selector-circle">
    <p class="selector-1 someother-class">selector 1</p>
    <p class="selector-2">selector 2</p>
    <p class="selector-3">selector 3</p>
    <p class="selector-4">selector 4</p>
    <p class="selector-5">selector 5</p>
</div>

JavaScript

var $selectors = $('.selector-circle').children('[class^="selector-"]');

$.each($selectors, function() {
    var title = $(this).text();

    console.log(title);
});

输出

selector 1

selector 2

selector 3

selector 4

selector 5

如果以后添加selector-6、selector-7等，则上述代码仍将运行而不需要更改。

这是工作的小提琴。

Answer 2

一个数组会好得多。根据您想要处理的数据，您甚至可能不需要这样做。您希望使用jQuery、.filter()和.map()方法。

var topics = $('.selector-circle').children().filter(function () {
    return this.className.match(/\bselector-\d+/);
}).map(function() {
    return $(this).text();
}).get();
//result: ["topic1", "topic2", "topic3", ....]

Answer 3

一种简单的方法是为此使用数组：

var arrOfData = [];
var length = 3; // change this if you need something dynamic

// fill the array
for(var i = 1 ; i <= length; i++)
{
   arrOfData.push($('.selector-circle').children('.selector-' + i).text());
}

// Heres how you fetch data
function getTitle(idx){
   return arrOfData[idx];
}