Question

我正在尝试使用来自用户输入的多个变量来连接类选择器。我得到一个空数组作为答案。

用户输入从下拉菜单中捕获并保存为变量：

var changed1 = $("#dropdown1-ddl option:selected").text();
var changed2 = $("#dropdown2-ddl option:selected").text();

根据列表项是否具有该特定类，显示结果列表。

$("ul li").hide();    
$("ul li ."+changed1+"."+changed2).parent().show();

列表已设置为从数据库中提取所有信息，并将搜索项存储在每个li标记下方的div标记中的类中。因此显示了父母。

<ul>
<li>
    <div class="value1"></div>
    <div class="value2"></div>
</li>
<li>
    <div class="value1"></div>
    <div class="value2"></div>
</li> 
</ul>

JQuery应该在div中搜索与搜索词匹配的所有div并显示它们。

目前我可以提取用户输入并将其保存为变量。我可以搜索一个变量就好了，但添加第二个继续给出一个空数组（至少这是结果，如果我只是一个console.log来输出连接的结果。

Answer 1

您的选择器当前表示li中某个ul的子元素必须包含两个类changed1和changed2等于。

但由于每个div只有一个类，您可以尝试以下方法：

$("ul li").has('.' + changed1).filter(':has(.' + changed2 +')').show();

这会过滤出第一个li，其中包含一个div，其值为changed1的类，并过滤那些（li的）列表进一步过滤那些同时具有值为{的类的div的过滤器。 {1}}，然后显示那些匹配两者的li。

我不确定这是最有效的方式，但确实有效。

简单的jsFiddle我曾经测试过：http://jsfiddle.net/DCqwH/

Answer 2

尝试使用属性选择器`

$("ul li").hide();
$('ul li[class="' + changed1 + '"][class="' + changed2 + '"]').parent().show();

Answer 3

可能你想要这个：

var changed = ['value1','value2'];

var ul_parent = $("ul"),
    li_selector = $.map(changed,function(value,key){
        return '.'+value;
    }).join(', ');

$(li_selector, ul_parent).each(function(){
    $(this).parent().show();
});

See jsFiddle

如果需要组合多个选择器，则需要用逗号分隔它们（join()语句）;如果您的输入只是类名，则需要添加一个.（$.map()语句）;如果您需要将多个选择器限制为特定的<ul>，则需要使用双参数$()选择器（最后一行）。

更新：添加了.each()语句，以确保我们在正确的对象上调用.parent()。

组合起来，它们应该适用于所有（非空）数组输入。

JQuery - 在类选择器中使用多个变量

3 个答案: