2

因此，只有当类都在一组类中找到时，我才尝试选择具有多个类的元素。

例子。我有一个 id="foo" 和 class="red blue" 的元素

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

可以说我有集合 {red} 应该找不到任何东西。{red blue} 然后应该找到 '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.)

我也不确定这里的“或”运算符是否是我想要的。$.('.red,.blue') 然后将返回任何带有红色或蓝色的元素，这不是我想要的。我已经弄清楚了这个功能。

有什么“全能”功能吗？

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

4

6 回答 6

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']);

演示：小提琴

于 2013-09-12T07:14:45.640 回答
0

你可以试试这个：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
});
于 2013-09-12T09:13:53.603 回答
0

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

我会采取相反的方式。不要选择您拥有的颜色，而是过滤掉那些与您的预期结果不匹配的颜色。

例如，假设您有 for color class .blue, .red, .green, .yellow。为了匹配您在示例中使用的过滤器，这将是

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

您仍然必须弄清楚如何构建集合。但这是另一个问题。

于 2013-09-12T06:52:37.453 回答
0

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

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/

于 2013-09-12T08:46:52.573 回答
0

我想出了一个相当直接的方法。我有一个带有颜色类别的 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 类="红白"

但是，我对 $(.foo.bar.ed) 选择器有一点问题。有时它似乎会随机选择具有其他类的元素。例如。$(.foo.bar.ed) 会得到带有 class="foo bar ed dog cat" 的东西。有任何想法吗？

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

于 2013-09-12T10:55:57.893 回答
0

编辑：
我第一次把它弄反了，这是一个更好的示例代码：

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;

代码可以优化，只是给你思路。

于 2013-09-12T07:01:10.427 回答