带有复杂选择器的 jQuery

Question

我的应用程序中有输入控件列表。我想找到所有输入控件，所以我编写了以下运行良好的 JS 代码。

HTML

<input id="txt1" value="sdgjhsgd" type="text" />
<div Class="tab active">
    <input id="txt2" value="gf5" type="text" />
    <input id="txt3" value="4r" type="text" />
    <input id="txt4" value="345" type="text" />
</div>
<div Class="tab">
    <input id="txt21" value="dfg" type="text" />
    <input id="txt31" value="56" type="text" />
    <input id="txt41" value="67" type="text" />
</div>
<div Class="tab">
    <input id="txt22" value="df" type="text" />
    <input id="txt32" value="32" type="text" />
    <input id="txt42" value="65" type="text" />
</div>

JS

var inputs = $(":input:not(input[type='hidden'])");

FIDDLE

现在我想找到父 div 的输入控件具有活动的类名以及没有父级的输入控件。我使用了以下代码但失败了。

var inputs = $(":input:parent('div')[className='tab active']:not(input[type='hidden'])");

所以必须选择输入是

txt1
txt2
txt3
txt4

Answer 1

要选择父类“活动”的 div 内的所有输入，请使用：

$(".active input:not([type='hidden']");

要选择没有父级的输入控件，请使用以下内容：

$(".your-container > input:not([type='hidden'])");

类“your-container”的元素应该是您发布的 HTML 代码的包装元素。

您可以一起使用以下内容（不推荐，它是一个长选择器）：

 $(".active input:not([type='hidden'], .your-container > input:not([type='hidden'])");

Answer 2

现在我想找到父 div 的输入控件具有活动的类名，以及没有父的输入控件。

为什么要将所有这些都塞进一个选择器中？ jQuery 选择器不是 XPath，jQuery 有用于复杂遍历和过滤的 API 方法。

您正在寻找类似的东西：

var inputs = $(":input").not("[type='hidden']").filter(function () {
    var $parent = $(this).parent();
    return $parent.is("div.tab.active") || !$parent.is("div.tab");
});

Answer 3

我认为最好按步骤全选：

var activeDiv = $('.active'); //active div

var activeInputs = $(':input:not(input[type="hidden"])', activeDiv); // inputs in div

对我来说，这看起来很奇怪，但如果你需要 - 你可以这样做：

var inputsWithoutTab = $('input:not([type="hidden"]):not(".tab > input")'); // To select element which is not placed into div

$.merge(activeInputs, inputsWithoutTab); // And then marge them.
alert(activeInputs.lengh); // return 4

Answer 4

在 jquery 中使用 filter() 来检索特定元素

var input=$(".active").find("input").filter(function () {
    return !$(this).is(":hidden")

}).get();
alert(input.length);

DEMO

没有父元素

   var input = $("input").filter(function (i, v) {     
     return (!$(this).is(":hidden") && $(this).parent().hasClass("active") || !$(v).parent().is("[class^=tab]") && !$(this).is(":hidden"))
    }).get();
alert(input.length);

DEMO