我怎么算他们? jQuery选择器

时间:2017-10-07 16:49:30

标签: jquery jquery-selectors

我从下面的$self开始。我想计算id^=name块的总数,这些块具有类error的直接子节点和/或具有类field_error的孙子节点。然后,我想知道其中有多少是在id^=name$self之前/之后{我想知道$self在jQuery对象中的块位置我们刚刚创建了。)

<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个之后)

1 个答案:

答案 0 :(得分:1)

尝试这样的事情。

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

这里我们返回包含所需匹配项的元素。

<强>演示

&#13;
&#13;
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"))
})
&#13;
<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>
&#13;
&#13;
&#13;