选择除特定区域之外的所有 FORM 元素

Question

也许我对 NOT Selector 的理解是错误的....但我试图选择不在表单某个“区域”中的表单上的每个元素。

我试图抓取除整个表单的“meter-detail”区域内的元素之外的所有元素。

• 失败：$('form').not('.meter-detail')
• 失败：$('form:not(.meter-detail)')

HTML 示例：
只应选择顶部 4 个和底部 4 个元素。不应选择“meter-detail”区域中的任何内容。

<form>
     <input id="Entity_DeviceName" type="text" value="" />
     <input id="Entity_BalancedZone" type="text" value="" />
     <input id="Entity_FlowDirection" type="text" value="" />
     <input id="Entity_AreaName" type="text" value="Intrastate" />

     <div class="meter-detail">
          <div class="meter-blade" data-id="1">
               <input id="Entity_MeterName" type="text" value="1111" />
               <input id="Entity_MeterNumber" type="text" value="1111" />
          </div>
          <div class="meter-blade" data-id="2">
               <input id="Entity_MeterName" type="text" value="2222" />
               <input id="Entity_MeterNumber" type="text" value="2222" />
          </div>
     </div>

     <input id="Entity_Producer" type="text" value="" />
     <input id="Entity_ProducerContactName" type="text" value="" />
     <input id="Entity_ProducerPhone" type="text" value="" />
     <input id="Entity_ProducerEmail" type="text" value="" />
</form>

但是，经过检查...

Answer 1

没有选择器可以根据父项明确排除元素。但是，您可以通过使用 filter() 并提供您自己的逻辑来检查该父元素来实现您的需要。试试这个：

let $inputs = $('form :input').filter((i, el) => $(el).closest('.meter-detail').length == 0);

$inputs.addClass('foo'); // just for this demo

input { 
  width: 50px;
  border: 1px solid #CCC;
  margin: 2px;
}

.foo {
  background-color: #5dda5d2e;
  border: 1px solid #0C0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input id="Entity_DeviceName" type="text" value="" />
  <input id="Entity_BalancedZone" type="text" value="" />
  <input id="Entity_FlowDirection" type="text" value="" />
  <input id="Entity_AreaName" type="text" value="Intrastate" />

  <div class="meter-detail">
    <div class="meter-blade" data-id="1">
      <input id="Entity_MeterName" type="text" value="1111" />
      <input id="Entity_MeterNumber" type="text" value="1111" />
    </div>
    <div class="meter-blade" data-id="2">
      <input id="Entity_MeterName" type="text" value="2222" />
      <input id="Entity_MeterNumber" type="text" value="2222" />
    </div>
  </div>

  <input id="Entity_Producer" type="text" value="" />
  <input id="Entity_ProducerContactName" type="text" value="" />
  <input id="Entity_ProducerPhone" type="text" value="" />
  <input id="Entity_ProducerEmail" type="text" value="" />
</form>

请注意，这是假设您在工作版本中的 HTML 比问题中显示的更复杂，否则您可以简单地使用：

let $inputs = $('form > :input');

Answer 2

您可以使用此代码：

let elements = $('form *').not('.meter-detail, .meter-detail *');