None
Reputation: 5670
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("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); 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&mode=crop&width=1140&height=600&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("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); 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&mode=crop&width=1140&height=600&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>Upvotes: 0
Views: 122
Answers (3)
Sami
Reputation: 3800
Try this one:
$(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);
});
});
Upvotes: 1
Deep
Reputation: 9794
You selector is not able to select the .item div properly. You can always debug such issues by doing console.log() and check in the develop console.
As a resolution you can check for .item class div inside the .slides context like below.
$(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("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); 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&mode=crop&width=1140&height=600&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("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); 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&mode=crop&width=1140&height=600&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>Upvotes: 1
Pranav C Balan
Reputation: 115212
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("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); 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&mode=crop&width=1140&height=600&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("/media/1006/1140x550.png?anchor=center&mode=crop&width=1600&height=700&rnd=131237861660000000"); 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&mode=crop&width=1140&height=600&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>Upvotes: 1
Related Questions
- How do I iterate through children elements of a div using jQuery?
- Loop thru nested DIV element
- Loop through all children of an div
- Jquery loop through elements div in a div
- How to loop through nested HTML div elements using jQuery
- jQuery loop through Child divs
- JQuery: How to loop through all child elements of a div
- Loop through all element child
- Unable to find children of div element
- Trouble accessing child divs in jquery