Question

所以我只是在一组类中找到类时才尝试选择具有多个类的元素。

实施例。我有一个id =“foo”和class =“red blue”的元素

然后我有一些给定的颜色。我想从中选择集合中的所有元素。

假设我有一套{red}应该找不到任何东西。 {red blue}然后找到'foo'。如果我有{红蓝绿}，那么仍然应该找到'foo'。

我已尝试使用多个选择器，但一旦设置大于{red blue}

，它就不起作用

$.('.red') will return foo (which is not what I want.)
$.('.red.blue') will return foo (good!)
$.('.red.blue.green') will return nothing (bad.)

我不确定这里的'或'运算符是我想要的。 $。（'。red，.blue'）将返回任何带有红色或蓝色的元素，这不是我想要的。我已经找到了这个功能。

是否存在任何“全部进入”功能？

我正在考虑使用这组项目迭代每个选择查询，但是当该集合为＆gt;时，这会很快变成很多查询。 4项长。

Answer 1

注意：这是一个概念性解决方案......您必须根据您的具体要求进行调整

function x($targets, array){
    var filtered = $targets.filter(function(){
        var classNames = this.className.split(/\s+/), valid = true;
        $.each(classNames, function(idx, value){
            if($.inArray(value, array) == -1){
                valid = false;
                return false;
            }
        });
        return valid;
    });
    //do something
    return filtered;
}

然后

//this is the set of elements against which the tests have to be done
var $targets = $('#ct').children();

x($targets, ['red']);
x($targets, ['red', 'green']);

演示：Fiddle

Answer 2

我不确切地知道你的问题的背景是什么，但如果它与颜色有关，我想有一定数量的课程。

我想采取的方式恰恰相反。而不是选择你拥有的颜色，过滤掉那些与你的预期结果不符的颜色。

例如，让我们说你有颜色类.blue, .red, .green, .yellow。要匹配您在示例中使用的过滤器，那将是

:not(.blue,.green,.yellow) /*foo does not match, it is blue*/
:not(.green,.yellow) /*Match*/
:not(.yellow) /*Match*/

你仍然需要弄清楚如何构建集合。但这是另一个问题。

Answer 3

编辑：
我第一次反转，这是一个更好的示例代码：

var requiredClasses = ['red', 'blue'];  
var relevant = $('#my_div span');

var result = [];
elements_loop:
for(i = 0; i< relevant.lenght; ++){
   var el = relevant[i];
   var classList = el.attr('class').split(/\s+/);
   $.each( classList, function(i, cls){
       if (! $.inArray(cls, requiredClasses) {
          //skip the element if any of its class is not in the set.
          break elements_loop;        
       }
   });
   result.push(el);
}
return result;

可以优化代码，只是给你一个想法。

Answer 4

您可以尝试以下功能。它需要一系列类：

function GetElements(classes) {
    var selector = "";
    for (var i = 0; i < classes.length; i++) {
        if (selector != "") selector += ",";
        selector += "." + classes[i];
    }

    return $(selector).filter(

    function () {
        var ele = $(this);
        var eleClasses = ele.attr('class').split(' ');

        if (classes.length < eleClasses.length) {
            return false;
        }

        var matched = 0;
        for (var i = 0; i < eleClasses.length; i++) {
            for (var j = 0; j < classes.length; j++) {
                if (eleClasses[i] == classes[j]) {
                    matched++;
                    break;
                }
            }
        }

        return eleClasses.length === matched;
    });
}

试试@ http://jsfiddle.net/purnil/maWhP/3/

Answer 5

你可以试试这个： http://jsfiddle.net/maWhP/7/

$(function () {
    var selector = ['.red','.blue','.green','.other'];
    $r = $(selector.join(', ')); // select all 
    $r.each(function() {
        var $t = $(this);
        $.each(selector, function (i, sel) { // each selector
            if ( !$t.hasClass(sel.substring(1)) ) { // remove if selector not match
               $r = $r.not($t);     
               return false; // break the loop                
            }
        });     
    });
    $r; // is what you want
});

Answer 6

我想出了一个相当直接的方式。我有一个颜色类的div。

我只是创建了一个包含所有不同元素类（数组）的数组。然后我根据输入颜色测试它们。

var user_colors = ['red', 'white', 'blue'];
var all_colors = [['red', 'green', 'blue', 'white'], ['red', 'blue'], ['red', 'white']];  //this array is constructed from the elements I'm interested in

$(all_colors).each(function(i, rec) {
if($(rec).not(user_colors).length == 0) {
  str = "";
  str = "." + rec.join('.');
  $(str).fadeIn("slow");
}
});

这将会使用红色和白色等级来淡化。 div class =“red white”

但是我的$（。foo.bar.ed）选择器有点问题。有时它似乎随机也会选择带有附加类的元素。例如。 $（。foo.bar.ed）会得到class =“foo bar ed dog cat”。有什么想法吗？

感谢所有的投入！ D.rave和Arun P Johny帮助确定了它。

jquery根据类集选择具有多个类的元素

6 个答案: