javascript - 无法循环遍历 div 的子元素

Question

我的代码是这样的

  $(document).ready(function() {

    $('.slides').children('.item').each(function() {

      var tValue = $(this).find('#campaignValidity').val(); // "this" is the current element in the loop

      tTimer = $(this).find('.timer');
      alert(tTimer);
    });

  });

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="content apc banner no-padding" id="pos_1197">
  <div class="slides slick-initialized slick-slider slick-dotted" role="toolbar">
    <div class="slick-prev slick-arrow" style="display: table;"><i class="ion-chevron-left"></i>
    </div>
    <div aria-live="polite" class="slick-list draggable" style="height: 550px;">
      <div class="slick-track" role="listbox" style="opacity: 1; width: 3000px;">
        <div class="item myclass medium  c5-bg odd slick-slide slick-current slick-active" style="background-image: url(&quot;/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1600&amp;height=700&amp;rnd=131237861660000000&quot;); width: 1500px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;"
        data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00">
          <div class="image hidden-lg hidden-md">
            <img src="/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1140&amp;height=600&amp;rnd=131237861660000000" alt="Banner_Home">
          </div>
          <div class="table-cell">
            <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
              <p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
              <p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="0">Donate</a>
              </p>

              <h2 class="timer"></h2>
              <input id="campaignValidity" type="hidden" value="11/17/2016 6:03:34 PM" tabindex="0">
            </div>
          </div>
        </div>
      </div>
      <div class="item myclass medium  c5-bg even slick-slide" style="background-image: url(&quot;/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1600&amp;height=700&amp;rnd=131237861660000000&quot;); width: 1500px; position: relative; left: -1500px; top: 0px; z-index: 998; opacity: 0;"
      data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01">
        <div class="image hidden-lg hidden-md">
          <img src="/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1140&amp;height=600&amp;rnd=131237861660000000" alt="Banner_Home2">
        </div>
        <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
          <p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
          <p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="-1">Donate</a>
          </p>

          <h2 class="timer"></h2>
          <input id="campaignValidity" type="hidden" value="11/19/2016 6:03:34 PM" tabindex="-1">
        </div>
      </div>
    </div>
  </div>


</section>

对我来说一切看起来都很好，但由于某种原因循环不起作用，我没有收到任何警报消息。谁能告诉我我在这里做错了什么？

Answer 1

id 在代码中应该是唯一的，因此请使用 class 代替，否则只有具有 id 的第一个元素可以访问。虽然您需要使用 find()方法而不是 children()因为它只选择直接子代，而 .item 不是直接子代。

$(document).ready(function() {
  $('.slides').find('.item').each(function() {
    var tValue = $(this).find('.campaignValidity').val();
    tTimer = $(this).find('.timer');
    alert(tValue);
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="content apc banner no-padding" id="pos_1197">
  <div class="slides slick-initialized slick-slider slick-dotted" role="toolbar">
    <div class="slick-prev slick-arrow" style="display: table;"><i class="ion-chevron-left"></i>
    </div>
    <div aria-live="polite" class="slick-list draggable" style="height: 550px;">
      <div class="slick-track" role="listbox" style="opacity: 1; width: 3000px;">
        <div class="item myclass medium  c5-bg odd slick-slide slick-current slick-active" style="background-image: url(&quot;/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1600&amp;height=700&amp;rnd=131237861660000000&quot;); width: 1500px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;"
        data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00">
          <div class="image hidden-lg hidden-md">
            <img src="/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1140&amp;height=600&amp;rnd=131237861660000000" alt="Banner_Home">
          </div>
          <div class="table-cell">
            <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
              <p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
              <p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="0">Donate</a>
              </p>

              <h2 class="timer"></h2>
              <input class="campaignValidity" type="hidden" value="11/17/2016 6:03:34 PM" tabindex="0">
            </div>
          </div>
        </div>
      </div>
      <div class="item myclass medium  c5-bg even slick-slide" style="background-image: url(&quot;/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1600&amp;height=700&amp;rnd=131237861660000000&quot;); width: 1500px; position: relative; left: -1500px; top: 0px; z-index: 998; opacity: 0;"
      data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01">
        <div class="image hidden-lg hidden-md">
          <img src="/media/1006/1140x550.png?anchor=center&amp;mode=crop&amp;width=1140&amp;height=600&amp;rnd=131237861660000000" alt="Banner_Home2">
        </div>
        <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 text-center " data-os-animation="fadeInUp" data-os-animation-delay="0s">
          <p class="heading main c3-text">WIn a Spectacular gift by donating through us</p>
          <p class="link"><a class="btn c1-bg c5-text" href="/" tabindex="-1">Donate</a>
          </p>

          <h2 class="timer"></h2>
          <input class="campaignValidity" type="hidden" value="11/19/2016 6:03:34 PM" tabindex="-1">
        </div>
      </div>
    </div>
  </div>


</section>