Athul Athul - 17 days ago 5
Javascript Question

Unable to loop through child elements of a div

My Code is like this



$(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>




Everything looks okay to me, but for some reason the loop is not working and I am not getting anything as Alert message. Can any one let me know what I am doing wrong here?

Answer

The id should be unique in your code so use class instead otherwise only the first element with the id can access. Although you need to use find() method instead of children() since it only selects direct child and .item is not the direct child.

$(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>

Comments