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();

最初，我编写了如上所述的脚本，但现在该项目需要不同数量的＆＃34;主题＆＃34;和相应的文本（），所以我需要代码是灵活的，而不是我最初使用的更硬编码的方法。

我知道如何在.each中的变量中插入＆＃39; .selector-1＆＃39;部分，与＆＃34;我＆＃34;作为每个指数：

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

但我不知道如何序列化＆＃34; topic1＆＃34;变量名称，因此它基本上变成了＃34; topic + i＆＃34;因为每次运行的次数都很多，然后它会与每个相应的＆＃34;选择器+ i＆＃34;相关联。

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

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

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

您只需使用wildcard选项即可选择所有孩子。它是动态的，您无需管理单独的数组来跟踪元素。

<强> 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。

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

jQuery：使用.each定义一系列变量

3 个答案: