我怎样才能计算它们? jQuery 个选择器

How can I count them? jQuery selectors

我从下面的 $self 开始。我想计算 id^=name 有直接 child 与 class 的 error AND/OR 和 grandchild 的总数class 个 field_error。然后,我想知道其中有多少是 before/after id^=name 块,其中 $self 是(我想知道 $self 在 [=28= 中的块位置] object我们刚刚创建)。

<div id="name1">
    <div class="fourteen wide field error">  //<==== here is one
        <input id="OfficeName1"></input>
        <div class="dropdown"></div>     
    </div>
</div>
<div id="name2">
    <div class="fourteen wide field">
        <input id="OfficeName1"></input>
        <div class="dropdown field_error"></div> //<==== here is one
    </div>
</div>
<div id="name3">
    <div class="fourteen wide field error"> //<==== here is one
        <input id="OfficeName1"></input>
        <div class="dropdown field_error"></div> //<==== here also (but it is the same block, so it does not count)
    </div>
</div>
<div id="name4">
    <div class="fourteen wide field error"> //<==== here is one
        <input id="OfficeName1"></input>
        <div class="dropdown field_error"> //<==== here also (but it is the same block, so it does not count)
            <input></input> // <========= starting here $self
        </div>     
    </div>
</div>
<div id="name5">   //<==== this block does not count
    <div class="fourteen wide field">
        <input id="OfficeName1"></input>
        <div class="dropdown"></div>     
    </div>
</div>
<div id="name6">
    <div class="fourteen wide field error">  //<==== here is one
        <input id="OfficeName1"></input>
        <div class="dropdown field_error"></div> //<==== here also (but it is the same block, so it does not count)
    </div>
</div>

这里的答案是总共5个,第4位(前3个,后1个)

尝试这样的事情。

var els = $("div[id^=name]").map(function() {
  if ($(this).find(":first-child").hasClass("error") == true || $(this).find(".field_error").length > 0)    {
    return $(this)
  }
})

这里我们 return 那些包含任一必需匹配项的元素。

演示

var els = $("div[id^=name]").map(function() {
  if ($(this).find(":first-child").hasClass("error") == true || $(this).find(".field_error").length > 0)    {
    return $(this)
  }
})

$.each(els, function() {
  console.log($(this).attr("id"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="name1">
  <div class="fourteen wide field error"> //
    <====h ere is one <input id="OfficeName1"></input>
      <div class="dropdown"></div>
  </div>
</div>
<div id="name2">
  <div class="fourteen wide field">
    <input id="OfficeName1"></input>
    <div class="dropdown field_error"></div> //
    <====h ere is one </div>
  </div>
  <div id="name3">
    <div class="fourteen wide field error"> //
      <====h ere is one <input id="OfficeName1"></input>
        <div class="dropdown field_error"></div> //
        <====h ere also (but it is the same block, so it does not count) </div>
    </div>
    <div id="name4">
      <div class="fourteen wide field error"> //
        <====h ere is one <input id="OfficeName1"></input>
          <div class="dropdown field_error"> //
            <====h ere also (but it is the same block, so it does not count) <input></input> //
              <=========s tarting here $self </div>
          </div>
      </div>
      <div id="name5"> //
        <====t his block does not count <div class="fourteen wide field">
          <input id="OfficeName1"></input>
          <div class="dropdown"></div>
      </div>
    </div>
    <div id="name6">
      <div class="fourteen wide field error"> //
        <====h ere is one <input id="OfficeName1"></input>
          <div class="dropdown field_error"></div> //
          <====h ere also (but it is the same block, so it does not count) </div>
      </div>