分组迭代的CSS选择器

Question

我有许多元素要作为组进行循环。考虑一下这个HTML：

<input class="matching match-1" />
<input class="matching match-1" />
<input class="matching match-2" />
<input class="matching match-2" />
<input class="matching match-2" />
<input class="matching match-3" />
<input class="matching match-3" />
// etc

我想要一个CSS选择器，它允许我将这些循环作为组进行循环，因此-使用这个示例-循环将有3次迭代(一次用于match-1，一次用于match-2，一次用于match-3)。1,2,3等是用于分组的变量，但这不是固定的，因此不能依赖于这些值的硬编码。这有可能吗？我将使用jQuery或prototype，这并不重要。

谢谢

Answer 1

试试这个：

var groups = [];
$(".matching").each(function(index, elem) {
   if (this.className.match(/(?:^|\s+)match-(\d+)(?:\s|$)/)) {
       if (typeof groups[RegExp.$1] == "undefined") {
           groups[RegExp.$1] = [];
       }
       groups[RegExp.$1].push(this);
   }
});

这将使用类匹配来迭代元素列表，测试它是否也有一个match-x形式的类，获取x并使用x作为索引将其添加到匹配组列表中。

Answer 2

在标准CSS2 (也就是目前被广泛支持的实现)中，没有您所描述的可用的东西。

然而，CSS3有更灵活的选择器，幸运的是，它们都是用jQuery实现的。

尝试如下所示：

$("input[name^='match-']")

这将返回与您尝试执行的操作相匹配的DOM节点的jQuery集合。您可以使用经典JS或jQuery的.each()进行迭代。

Answer 3

使用jQuery：

var indices = {};
var index;

$('.matching').each(function() {
    index = $(this).attr('class').match(/\d+$/);
    indices[index] = index;
});

// Now you have a unique list of matching numbers for your loops