Questions:
How can I select an array of input and select elements that are not hidden from the form below, using jQuery?
<form class="FORM_1">
<div class="a" style="display:inline-block><input id="A"/></div>
<div class="a" style="display:none"><input id="B"/></div>
<div class="a"><select id="C"/></div>
<div class="a"style="display:none"><select id="D"/></div>
<div class="a style="display:inline-block"><input id="F"/></div>
</form>
I tried with code below but it doesn’t work how I need.
$('.FORM_1 input, .FORM_1 select').prop('display', 'inline-block').each(function(index){
var input = $(this);
console.log('Type: ' + input.attr('type'));
});
How to&Answer:
Use is(":visible") to select visible elements
$('.FORM_1 input:visible, .FORM_1 select:visible').addClass('YourStuff');
Below code is enough to display the elements, If you want display inline block, assign in css first as inline block and add display none as inline like below
input, select {
display: inline-block;
}
Then in html
<input style="display: none;" />
Then in JS
$('.FORM_1 input, .FORM_1 select').show();
Answer：
$(".FORM_1 input:visible, .FORM_1 select:visible").each(function(index) {
var input = $(this);
console.log("Type: " + input.prop("type"));
});.a {
display: inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="FORM_1">
<div class="a"><input id="A" type="text" />
</div>
<div class="a" style="display:none"><input id="B" type="text" /></div>
<div class="a"><select id="C"></select></div>
<div class="a" style="display:none"><select id="D"></select></div>
<div class="a"><input id="F" type="text" /></div>
</form>Tags: exception, input, jqueryjquery, select
