代码之家 › 专栏 › 技术社区 › robjmills

分组迭代的CSS选择器

css-selectors prototypejs css jquery

robjmills · 技术社区 · 15 年前

我有许多元素要作为组循环通过。考虑这个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或原型,这并不重要。

谢谢

8 回复 | 直到 13 年前

Gumbo 15 年前

试试这个:

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

这将用类迭代元素列表匹配 ,测试它是否还具有窗体类 匹配X 得到 X 并使用将其添加到匹配组列表中 X 作为索引。

Alex Mcp 15 年前

在标准CSS2(也就是目前广泛支持的实现)中,没有什么能像您描述的那样可用。

然而,CSS3有更灵活的选择器,幸运的是,它们都在jquery中实现。

尝试如下操作:

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

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

user113716 15 年前

使用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

Kasturi 15 年前

编辑

    for(i=0;i<3;i++){
   var str = ".matching-match-" + i;
        $(str).each(function(index) {
           //do something
          });
    }

我希望我能正确理解你的问题。这是卢金的工作吗?

Jakub Hampl 15 年前

max = parseInt($('.matching:last-child').attr('class').match(/d+/)[0]);
for(i = 1; i <= max; i++) {
  $els = $('.matching.match-'+i.toString());
  // do whatever you want on the group
}

Cristian 15 年前

这是可行的。没有时间通过xd测试它

var count = 1;
var alreadyCounted = new Array();
$(".matching").each(function(){
    if(typeof alreadyCounted[count] == 'undefined'){
        $('.match-'+count).each(){
            // DWTFYW
        }
        alreadyCounted[count] = true;
    }
    count++;
});

Diodeus - James MacFarlane 15 年前

这将建立您的组列表:

var classList = []
    $('.matching').each(function(i,e) {
        var myClasses = ($(e).attr('class')).split(" ")
        classList[myClasses[1]] = true      
    })

    for (index in classList) {
        alert(index)
        //your code here
    }

Tgr 15 年前

input[class^="matching match-"] 应该工作。我不知道你说的分组是什么意思。

编辑:

var groups = [];
var classes = {};
$('input[class^="matching match-"]').each(function() {
    classes[$(this).attr('class')] = 1;
});
for (c in classes) {
    groups.push($('input[class="'+c+'"]'))
}