带有复杂选择器的jQuery

Question

我的应用程序中有输入控件列表。我想找到所有输入控件，以便我编写了以下工作正常的JS代码。

目录

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

小提琴

现在我想查找父div 的输入控件具有

活动类名以及没有父级的输入控件。我使用了以下代码，但失败了。

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

因此，必须选择的输入是

txt1
txt2
txt3
txt4

Answer 1

要选择父类"active"的div内的所有输入，请使用以下命令：

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

要选择没有父控件的输入控件，请使用以下命令：

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

带有类"您的容器"的元素应该是您发布的 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);

演示

不带父元素

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

演示