Obtain Related Div Text with jQuery

烈酒焚心 提交于 2021-01-29 05:15:21

问题


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.


回答1:


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


来源:https://stackoverflow.com/questions/62848550/obtain-related-div-text-with-jquery

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!