無法從特定的 div 中獲取 ID 和值

Question

在過去的幾天里，我一直在努力解決這個問題，並試圖獲取特定的 div 詳細信息。 它實際上已解決，這是工作的一個 - 使用 jQuery 獲取相關的 Div 文本。 因此，如果您看過它，我會為每個 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 class div之外的錨標記來檢索這些值。 但問題是，它沒有得到單個 div 的 id 和值。 這是代碼片段：

 $(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 ：預期output-在檢查第一個選項並單擊下一步時，應顯示結果如下：

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>