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

【问题标题】：jQuery: define series of variables with .eachjQuery：用 .each 定义一系列变量
【发布时间】：2015-11-14 22:29:33
【问题描述】：

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

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”变量名，因此无论每次运行多少次，它本质上都变成“topic + i”，然后与每个相应的“selector + i”相关联.

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

在此先感谢您提供任何和所有有用的指示。

【问题讨论】：

不要那样做。使用数组或对象在一个变量中收集多个值。
谢谢。听起来不错，但我不知道如何去做，创建一系列值，其中 topicX = .selectorX.text()，其中 X 对等式的两边都是相同的，并且变量是建立在真实的HTML 中已有的值。 topicX 可能是 2 个值或 6，所以我需要它来循环浏览 HTML 中的许多项目，并且 .each 函数似乎很适合。
@david 如果您的问题得到解决，您能否考虑将此问题标记为已解决。谢谢。

标签： jquery variables each

【解决方案1】：

您可以简单地使用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。

【讨论】：

那么selector-circle-1 会有多个孩子吗？比如selector-1、selector-2等等？
我在这里删除了我最初的评论，因为这是对我工作代码的错误引用。我认为我在实施您的解决方案时遇到的问题是，正如彼得指出的那样，DOM 元素中有多个带有“.selector-1”的类。我明天必须回到这个。感谢您提供可能的解决方案。
没问题。如果您获得其实际外观的示例 html，那么我们可能会为您提供更好的帮助。总之祝你好运。

【解决方案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", ....]

【讨论】：

@Subash，你假设目标元素只有一个类?
是的，只有当您使用 * 而不是 ^ 时才会这样做，但如果有一个类的元素说 my-selector-class 不应该匹配，则可能会失败。
我认为这不是问题中的用例。
其实我只是想帮助你，而不是抹黑你的回答。我明白你不必接受我的建议。
让我们continue this discussion in chat。

【解决方案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];
}

【讨论】：