我遇到了一种情况，我想在其他导航标签中选择未隐藏和可见的输入元素。
我使用以下代码选择输入字段
$("input[type!=hidden]").each(function(){
......
});
但是，它选择使用 jQuery.hide（）函数隐藏的输入字段，即visibility none。在这里，我隐藏了输入元素的父母，即
如果我尝试使用visibility属性再次过滤，jQuery会将非活动（非当前）导航标签中的输入元素视为不可见。因此，未选择非活动选项卡的输入字段。
$("input[type!=hidden]").filter(:visible).each(function(){
......
});
如何在此方案中选择输入字段？
<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>
答案 0 :(得分：4)
您可以将.not()组合使用过滤器以获取所有可见输入：
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>
答案 1 :(得分：3)
jquery.hide()与input和<input type="hidden">之间存在根本区别。一个jquery.hide()
display所做的只是将input元素的none属性设置为$("input[type='hidden']")。
type所做的是搜索具有hidden属性值input的所有输入元素。
因此，当您隐藏type元素或其父元素时，它不会影响input元素的display属性，它只将none属性设置为type。
要使代码正常工作，您必须手动修改input元素的$(document).ready(function() {
$("#four").attr("type", "hidden");
$("button").click(function() {
$("input:not([type='hidden'])").each(function() {
$(this).val("2");
});
$("#output").html("Output: " + $("#one").val() + $("#two").val() + $("#four").val());
});
});属性。
参考代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>
<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>{{1}}＆＃13;
答案 2 :(得分：3)
<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").each(function(){
if($(this).parent().attr("style") !== "display: none;" && $(this).attr("type") !== "hidden" ){
$(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>
希望这个有用
答案 3 :(得分：1)
ws.Protection.SetPassword("myPassword");
ws.Protection.IsProtected = true;
ws.Protection.AllowSelectUnlockedCells = false;
ws.Protection.AllowSelectLockedCells = false;
答案 4 :(得分：0)
试试这个：
$(document).ready(function(){
$("button").click(function(){
$("input:not([type='hidden'])").each(function(){
$(this).css('background', "#ccc");
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<input type="text"><br>
<input type="hidden">
<button>Test</button>
</div>
答案 5 :(得分：0)
我已经使用过您的代码，它适用于我。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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());
console.log($("input[type='hidden']").val());
});
});
</script>
</head>
<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>
<input type="hidden" value="123">
</div>
</div>
Answer Should be : 221 (It should not change the hidden value)
<div id="output"></div>
</body>
</html>
答案 6 :(得分：0)
根据您的要求回答：
<html>
<head>
<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").each(function(){
if($(this).closest('div').is(':visible')){
$(this).val("2");
}
});
$("#output").html("Output: " + $("#one").val() + $("#two").val() + $("#four").val());
});
});
</script>
</head>
<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>
答案 7 :(得分：0)
这将选择可见选项卡中可见的所有元素以及仅由选项卡窗格隐藏的元素。如果创建隐藏效果的元素不是选项卡窗格，则会忽略它。
<html>
<head>
<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(){
var div = $(this).parent().closest(":hidden");
if(div.length == 0 || div.hasClass("tab-pane")){
$(this).val("2");
}
});
$("#output").html("Output: " + $("#one").val() + $("#two").val() +$("#four").val());
});
});
</script>
</head>
<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>