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

Question

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

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

本来我是这样写脚本的，但是现在项目需要数量不等的"topics"和相应的text()，所以我需要代码灵活一些，而不是我写的比较硬编码的方法第一次使用。

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

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

但我不知道如何序列化 "topic1" 变量名，因此无论每次运行多少次，它本质上都变成 "topic + i"，然后分别绑定到每个 "selector + i"。

看来我可能需要创建一个数组。

提前感谢您提供所有有用的指示。

Answer 1

数组会好得多。根据您想要对数据执行的操作，您甚至可能不需要这样做。您想使用 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 2

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

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];
}

Answer 3

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

HTML

<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等，上面的代码仍然运行，无需更改。

这是工作 jsfiddle。

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

jQuery: define series of variables with .each

variables

each

jquery