I am struggling with this thing for the last few days and trying to obtain specific div details. It was resolved actually and here is the working one - Obtain Related Div Text with jQuery. So if you have seen it, I was using individual buttons for each div section as follows:
<div class="divs">
<div class="heading">
<div class="h2Val"> //Trying to retrieve this value - The id
1
</div>
<div>What's the capital of England?</div>
<div class="heading2">
<div>
<input type="checkbox" id="val1" class="cbCheck" name="val1" value="London" />London</div>
//Another one is this - CheckBox value
</div>
<div class="heading2">
<div><input type="checkbox" id="val2" class="cbCheck" name="val2" value="New York" />New York</div>
</div>
<div>
<input type="button" class="btn" value="Get Value" /> //This is the button that was assigned with every div
</div>
</div>
</div>
But now, I am trying to separate the buttons and used anchor tag that's out of the parent div class divs to retrieve those values . But the issue is, it doesn't get the id and values of individual divs. Here is the code snippet:
$(document).ready(function() {
divs = $(".divs").children();
divs.each(function(e) {
if (e != 0)
$(this).hide();
});
var index = 0,
divs = $(".divs").children();
$("#next").click(function() {
index = (index + 1) % divs.length;
divs.eq(index).show().siblings().hide();
})
$("#prev").click(function() {
index = (index - 1) % divs.length;
divs.eq(index).show().siblings().hide();
})
$(".button").click(function() { //This doesn't get the id and value of heading div
var $container = $(this).closest('.heading')
var id = $container.find(".h2Val").text().trim();
var $checked = $container.find('.cbCheck:checked');
var values = $checked.map(function(){
return this.value
}).get();
console.clear()
console.log('ID: ' + id +' has ' + $checked.length + ' checked');
console.log('Values: ', values.join())
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="divs">
<div class="heading">
<div class="h2Val">
1
</div>
<div>What's the capital of England?</div>
<div class="heading2">
<div>
<input type="checkbox" id="val1" class="cbCheck" name="val1" value="London" />London</div>
</div>
<div class="heading2">
<div><input type="checkbox" id="val2" class="cbCheck" name="val2" value="New York" />New York</div>
</div>
</div>
<div class="heading">
<div class="h2Val">
2
</div>
<div>Who invented computer?</div>
<div class="heading2">
<div><input type="checkbox" id="val3" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div>
</div>
<div class="heading2">
<div><input type="checkbox" id="val4" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div>
</div>
<div class="heading2">
<div><input type="checkbox" id="val5" class="cbCheck" name="val5" value="Sir Isaac Newton" />Sir Isaac Newton</div>
</div>
</div>
</div>
<a class="button" id="prev">Previous</a>
<a class="button" id="next">Next</a>So I tweaked a bit with the following but it retrieves all the selected div values at a time rather than individual:
$(".button").click(function() { //This doesn't get the id and value of heading div
var $container = $('.divs').children().closest('.heading')
var id = $container.find(".h2Val").text().trim();
var $checked = $container.find('.cbCheck:checked');
var values = $checked.map(function(){
return this.value
}).get();
console.clear()
console.log('ID: ' + id +' has ' + $checked.length + ' checked');
console.log('Values: ', values.join())
});
});
Any better way or solution to resolve it?
Update 1: Expected output - When checked on first option and clicked Next, it should show result as follows:
ID: 1 has 1 checked
Values: London
Then when second question comes and the same should happen:
ID: 2 has 1 checked
Values: Charles Babbage
