Obtain Related Div Text with jQuery

Question

After bit of struggling and few valuable suggestions, I've come into a solution that works well as follows:

$(document).ready(function(){
    divs = $(".divs").children();
    divs.each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if (divs.next().length != 0)
            divs.next().show().prev().hide();
        else {
            divs.hide();
            divs.show();
        }
        return false;
    });

    $("#prev").click(function(){
        if (divs.prev().length != 0)
            divs.prev().show().next().hide();
        else {
            divs.hide();
            divs.show();
        }
        return false;
    });
    
    $(".btn").click(function() {
    $('.cbCheck:checkbox:checked').each(function(){
    var id = $(".h2Val").text();
              alert(id + $(this).val());
     });
});
});

<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>
       <input type="button" class="btn" value="Get Value" />
      </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>
       <input type="button" class="btn" value="Get Value" />
      </div>
    </div>
  </div>

  <a id="prev">Previous</a>
  <a id="next">Next</a>

As you can see, I am showing few questions with options to be selected. With the previous and next button, I can see previous or next question and select the answer. My challenge is when I select a CheckBox, say in div with the class h2Val, I require to get the respective number of that div.

1
Ques: What's the capital of England?
Options:
       i) London
      ii) New York

Say I selected London and when click on the Get Value button, it should show me the selected value as well the number 1 at the top and same for question 2. I tried this one but it gets me all the numbers in the div:

$('.cbCheck:checkbox:checked').each(function(){
   var id = $(".h2Val").text(); //Trying to obtain the div text 
   alert(id + $(this).val());
});

Anything that I missed here? Any idea would be appreciated - Thanks.

score 1 · Accepted Answer · answered Jul 11 '20 at 12:09

$(".h2Val").text() gets all text from all matching elements in the selector.

You need to target the instance within the same .heading container as the button. Traverse to the main parent container using closest() and use find() to only look within that instance

$(document).ready(function() {
  divs = $(".divs").children();
  divs.each(function(e) {
    if (e != 0)
      $(this).hide();
  });

  $("#next").click(function() {
    if (divs.next().length != 0)
      divs.next().show().prev().hide();
    else {
      divs.hide();
      divs.show();
    }
    return false;
  });

  $("#prev").click(function() {
    if (divs.prev().length != 0)
      divs.prev().show().next().hide();
    else {
      divs.hide();
      divs.show();
    }
    return false;
  });

  $(".btn").click(function() {
    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>
      <input type="button" class="btn" value="Get Value" />
    </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>
      <input type="button" class="btn" value="Get Value" />
    </div>
  </div>
</div>

<a id="prev">Previous</a>
<a id="next">Next</a>

Obtain Related Div Text with jQuery

1 Answers1

Linked