使用jQuery获取相关的Div文本 [英] Obtain Related Div Text with jQuery

问题描述

经过一番挣扎和一些有价值的建议，我提出了一个效果很好的解决方案 如下:

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>

如您所见，我向您展示的几个问题以及需要选择的选项.与以前和 下一个按钮，我可以看到上一个或下一个问题，然后选择答案.我的挑战是什么时候 我选择一个复选框，在div中使用类 h2Val 说，我需要获取相应的数字 该div的

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 

说我选择了伦敦，并且当点击获取价值按钮时，它应该向我显示所选的 值以及顶部的数字1和问题2相同.我尝试了这个，但是却得到了div中的所有数字:

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.

推荐答案

$(".h2Val").text()从选择器中所有匹配的元素中获取所有文本.

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

您需要将实例与按钮定位在同一.heading容器中. 使用closest()遍历到主父容器，并使用find()仅在该实例中查找

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>

这篇关于使用jQuery获取相关的Div文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！