I want to iterate through a a set of input nested into groups and sections,
with the goal of performaing validation within each group and section
<script src="jquery/jquery.js"></script>
<div id="groupA" class="preGroups">
<div id="section-A1">
<input name="SRPR1" type="text">
<input name="SRPR2" type="text">
</div>
<div id="section-A2">
<input name="SRPR1" type="text">
<input name="SRPR2" type="text">
</div>
<div id="section-A3">
<input name="SRPR1" type="text">
<input name="SRPR2" type="text">
</div>
<div id="section-A4">
<input name="SRPR1" type="text">
<input name="SRPR2" type="text">
</div>
</div>
<div id="groupB" class="preGroups">
<div id="section-B1">
<input name="SRPR1" type="text">
<input name="SRPR2" type="text">
</div>
<div id="section-B2">
<input name="SRPR1" type="text">
<input name="SRPR2" type="text">
</div>
<div id="section-B3">
<input name="SRPR1" type="text">
<input name="SRPR2" type="text">
</div>
</div>
<script>
// capture all groups
groups = $('div#[id^=group]');
console.log(groups);
// iterate through each group in groups
$.each(groups, function(key, group) {
console.log(group);
// iterate through each section in group
sections = $('div#[id^=section]');
$.each(sections, function(key, section) {
console.log(section);
// iterate inputs in each group
// more code goes here
/// console.log(input.name + " " + input.value);
});
});
Looks like you might need
sections = $(group).find('div#[id^=section]');instead ofsections = $('div#[id^=section]');EDIT
complete code here:
Demo