CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectors
Frntz
Frntz

Reputation: 2395

How to select all form elements which are not in a hidden parent in Jquery?

I need only one jQuery select line/selector (due to a JS plugin limitation) to find all inputs (hidden type inputs as well !!! i.e. '<input type=hidden />') which are not hidden due to one of its parent, I tried with this one 

:parent:not(hidden) input

but it doesn't work (should return input2 and input3 only).

Here a jsfiddle showing the issue: jsfiddle Demo

Upvotes: 2

Views: 242

Answers (2)

Hemal
Hemal

Reputation: 3760

You can do it with :visible selector

$("input:visible");

UPDATE

var jqueryselect = ":parent:visible input";
var res = "";
$("body").find(jqueryselect).each(function(i, ele){
    res += $(ele).attr("id") + " ";
});

$("#jqselect").text(jqueryselect);
$("#result").text(res);

UPDATE(AFTER QUESTION CODE UPDATED)(FIDDLE)

var jqueryselect =$("input").filter(function() { return  $(this).parent().is(":visible")  });
var res = "";
$("body").find(jqueryselect).each(function(i, ele){
    res += $(ele).attr("id") + " ";
});

$("#jqselect").text(jqueryselect);
$("#result").text(res);

Upvotes: 0

Tushar
Tushar

Reputation: 87203

When parent is hidden, its descendants are also hidden. Use :visible pseudo-selector

$('input:visible')

Demo

UPDATE

to find all inputs (hidden type inputs as well !!!

$("input:visible, input[type='hidden']")

Demo

Upvotes: 4

Related Questions