使用 jQuery 获取相关的 div 文本

Posted 2023-05-09

【中文标题】使用 jQuery 获取相关的 div 文本

【英文标题】：Obtain Related Div Text with jQuery

【发布时间】：2020-11-01 00:53:33

【问题描述】：

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

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

如您所见，我展示了几个带有可供选择选项的问题。与之前和 下一个按钮，我可以看到上一个或下一个问题并选择答案。我的挑战是什么时候 我选择了一个 CheckBox，例如在 div 中使用类 h2Val，我需要获取相应的数字 那个 div。

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

假设我选择了 London，当点击 Get Value 按钮时，它应该会显示我选择的 值以及顶部的数字 1 和问题 2 相同。我尝试了这个，但它让我得到了 div 中的所有数字：

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

我在这里错过了什么？任何想法将不胜感激 - 谢谢。

【参考方案1】：

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

您需要在与按钮相同的.heading 容器中定位实例。 使用closest() 遍历主父容器并使用find() 仅在该实例内查看

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