Menu
I came across a situation, where I want to select the input elements which are not hidden and visible in other nav-tabs.
I am using the following code to select the input fields
$("input[type!=hidden]").each(function(){
......
});
But, it selects the input fields which are hidden using jQuery.hide() function, i.e. visibility none. Here I'm hiding the parents of input elements i.e.
If I try to filter again with visibility property, jQuery treated the input elements in inactive(non-current) nav tabs as invisible. So, inactive tabs' input fields are not selected.
$("input[type!=hidden]").filter(:visible).each(function(){
......
});
How to select input fields in this scenario?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#three").hide(); //Hiding div element
$("button").click(function(){
$("input:not([type='hidden'])").each(function(){
$(this).val("2");
});
$("#output").html("Output: " + $("#one").val() + $("#two").val() + $("#four").val());
});
});
</script>
<html>
<body>
<ul class="nav nav-tabs " role="tablist">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="#first" role="tab">First</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#second" role="tab">Second</a>
</li>
</ul>
<div class="tab-content" id="tab-contents">
<div class="tab-pane active" id="first" role="tabpanel">
<input id="one" type="text" value="1"><br>
<button>Test</button>
</div>
<div class="tab-pane" id="second" role="tabpanel">
<input id="two" type="text" value="1"><br>
<div id="three">
<input id="four" type="text" value="1">
</div>
</div>
</div>
Answer Should be : 221 (It should not change the hidden value)
<div id="output"></div>
</body>
</html>
522
You can use .not() combined to a filter to get all the visible inputs:
var visible = $('input:not(:hidden)').filter(function() {
return $(this).css('visibility') != 'hidden';
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden">-
<input style="display:none">-
<input style="visibility: hidden">-
<input>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
