无法遍历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

x + x*x/4 在您的代码中应该是唯一的，因此请使用id，否则只有class的第一个元素才能访问。虽然您需要使用find()方法而不是children()，因为它只选择直接子项，而id不是直接子项。

.item

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

Answer 2

您的选择器无法正确选择.item div。您可以通过执行console.log（）并检查开发控制台来随时调试此类问题。

作为一种解决方案，您可以在.slides上下文中检查.item类div，如下所示。

  $(document).ready(function() {

    var context =  $('.slides');

    $('.item',context).each(function() {

      var tValue = $(this).find('#campaignValidity').val(); // "this" is the current element in the loop
      console.log(tValue);
      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 3

试试这个：

$(document).ready(function() {

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

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

  });