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的输入控件，其中类名激活，输入控件没有父级。

为什么要将所有内容塞入单个选择器？ 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 2

用于选择div中所有输入的父类＆＃39;活动＆＃39;用这个：

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

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

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

具有类＆＃34;你的容器＆＃34;的元素应该是您发布的HTML代码的包装元素。

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

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

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

jQuery与复杂的选择器

4 个答案: