我正在尝试使用来自用户输入的多个变量来连接类选择器。我得到一个空数组作为答案。
用户输入从下拉菜单中捕获并保存为变量:
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来输出连接的结果。
你的选择器目前说li
中ul
的某些子元素必须具有changed1
和changed2
等于的两个类。
但由于每个div只有一个类,您可以尝试以下方法:
$("ul li").has('.' + changed1).filter(':has(.' + changed2 +')').show();
这会筛选出第一个li,其中包含一个div,其值为changed1
,并且过滤列表(li的)进一步列出那些也有一个div值为changed2
的类,然后显示匹配的那些li都。
我不确定这是最有效的方式,但确实有效。
简单的jsFiddle我曾经测试过:http://jsfiddle.net/DCqwH/
可能你想要这个:
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();
});
如果需要组合多个选择器,则需要用逗号分隔它们(join()
语句);如果你的输入只是类名,你需要在前面添加一个.
($.map()
语句);如果您需要将多个选择器限制为特定的<ul>
,则需要使用双参数$()
选择器(最后一行)。
更新:添加了一个.each()
语句,以确保我们在正确的对象上调用.parent()
。
结合起来,它们应该适用于所有(非空)数组输入。
尝试使用属性选择器
$("ul li").hide();
$('ul li[class="' + changed1 + '"][class="' + changed2 + '"]').parent().show();