无法从特定的 div 获取 ID 和值

Question

过去几天我一直在努力解决这个问题，并试图获取特定的 div 详细信息。它实际上已解决，这是有效的 - Obtain Related Div Text with jQuery。因此，如果您已经看过它，我会为每个 div 部分使用单独的按钮，如下所示：

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

但是现在，我正在尝试分离按钮并使用父 div 类 divs 之外的锚标记来检索这些值。但问题是，它没有得到单个 div 的 id 和值。这是代码sn-p：

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

所以我对以下内容进行了一些调整，但它一次检索所有选定的 div 值而不是单个值：

 $(".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())
      });
    });

有没有更好的方法或解决方案来解决它？

更新1 ：预期输出 - 在第一个选项上检查并点击下一个时，它应该显示如下：

ID: 1  has 1 checked
Values: London

那么当第二个问题出现时，同样应该发生：

ID: 2  has 1 checked
Values: Charles Babbage

Answer 1

您可以获取.divs 的长度，然后声明一些具有值0 的变量。因此，每当单击下一个按钮时，您都可以检查variable 的值是否小于.divs 的长度和取决于此 increment 值加 1 或从 0 再次启动计数器。

演示代码：

$(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();
  })
  //declare
  var indexes = 0;
  $(".button").click(function() { 
  //get div length
    var lengths = divs.length;
    //pass indexes value to get required div
    var $container = $('.divs').children().eq(indexes);
   
    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())
    //checking if indexes value is less then length of div
    if (indexes < (lengths-1)) {
    //increment
      indexes++;
    } else {
    //start from 0 
      indexes = 0;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="divs" datas="abc">
  <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>