Javascript jquery基于类集选择具有多个类的元素

因此，我试图选择具有多个类的元素，前提是这些类都在一组类中

例如。我有一个id=foo，class=red-blue的元素

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

假设我有一套{red}什么也找不到。{红蓝}那么应该找到'foo'。如果我有{red-blue-green}，那么仍然应该找到'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.)

我也不确定这里的“or”操作符是否是我想要的。 $.'.red、.blue'然后将返回任何带有红色或蓝色的元素，这不是我想要的。我已经计算出了这个函数

是否有任何类型的“综合”功能

---

我在考虑用项目集迭代每个可能的选择查询，但是当集合长度大于4个项目时，这会很快变成很多查询。

我不知道您的问题的确切上下文，但是如果它与颜色相关，我猜类的数量是有限的

我的做法正好相反。不要选择你拥有的颜色，而是过滤掉那些与你期望的结果不匹配的颜色

例如，假设您有颜色类。蓝色、红色、绿色、黄色。 为了匹配您在示例中使用的过滤器，应该

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

您仍然需要考虑如何构造集合。但这是另一个问题。

编辑： 我第一次得到了相反的结果，下面是一个更好的示例代码：

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;

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

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

然后

---

演示：

您可以尝试以下功能。它需要一个类数组：

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

试试看@

你可以试试这个：

---

我想出了一个相当直截了当的办法。我有一个色阶的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=红白

但是，$.foo.bar.ed选择器有一个小问题。有时它似乎是随机的，它也会选择带有附加类的元素。例如，$.foo.bar.ed将得到class=foo-bar-ed dog-cat的东西。有什么想法吗

---

感谢所有的投入！D.rave和Arun P Johny帮助解决了这个问题。

不明白.red.blue.green有什么问题吗？你能做一把小提琴给我们看看当前的结果和你期望的结果吗？不明白你想要完成什么？他想通过给选择器红色和蓝色来选择一个类元素，蓝色和绿色。@Razz这根本没有意义。

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

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

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