Question

如何忽略隐藏div中的元素？我有一个带有可见元素的表单和一些隐藏在div中的元素...

<form id="my-form">
  <input name="split_values[]" class="split">
  <input name="split_values[]" class="split">
  <input name="split_values[]" class="split">
  <div class="hidden-div">
    <input name="split_values[]" class="split">
  </div>
</form>

我正在通过元素进行验证......

$('#my-form *').filter(':input').each(function(){ 
  // my validation here
});

但我想忽略隐藏div中的任何值。所以我想只看到前三个元素的验证，而不是隐藏div中的第四个元素。由于元素是动态生成的，因此我无法为它们提供ID。

提前致谢。

Answer 1

您可以使用:visible伪选择器过滤掉隐藏的input字段：

$('#my-form *').filter(':input:visible').each(function() {
   // my validation here
});

Answer 2

如果您确定您的结构不会改变，可以使用

$('#my-form>input')

只能获得表单中直接子节点的输入，不包括div。

$('#my-form>:not(.hidden-div)')

这将使我的形式的所有孩子都不属于隐藏的div-div

Answer 3

$('#my-form *').filter(':input').each(function(){ 
 if(!$(this.parentElement).hasClass('hidden-div')){
  console.log(this);
 }
});

Answer 4

我相信工作的例子，就在这里。

console.log($('#my-form .split:not(.hidden-div .split)').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
<input name="split_values[]" class="split">
<input name="split_values[]" class="split">
<input name="split_values[]" class="split">
<div class="hidden-div">
<input name="split_values[]" class="split">
</div>
</form>

Answer 5

使用div类的选择器

应用not函数

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(click to remove)
<div class="element">
  <div>
    Element 1
  </div>
</div>
<div class="element">
  <div>
    Element 2
    <br>Second line
  </div>
</div>
<div class="element">
  <div>
    Element 3
  </div>
</div>
<div class="element">
  <div>
    Element 4
    <br>Second line
  </div>
</div>
<div class="element">
  <div>
    Element 5
  </div>
</div>

JQuery忽略隐藏div中的元素值

5 个答案: