JQuery

Question

如何使用每个函数在 JQuery 中的元素内部移动？

考虑这是我的元素结构：

<div id="first-div">

    <div id="check-div1">
        <input type="checkbox" name="choices" id="mobile-check"
            value="Mobile">Mobile
    </div>

    <div id="check-div2">
        <input type="checkbox" name="choices" id="charger-check"
            value="Charger">Charger
    </div>

    <div id="check-div3">
        <input type="checkbox" name="choices" id="headphone-check"
            value="Head Phone">Head Phone
    </div>
</div>

我想使用 each 方法打印警报中每个复选框的值。

我尝试了以下

    $("#first-div").each(function(){
        alert($(this).id.div); // struck here to travel inner of first-div
    });

Answer 1

$('#first-div div').each(function() {
  var val = $(this).find('input').val();
  alert(val)


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first-div">

  <div id="check-div1">
    <input type="checkbox" name="choices" id="mobile-check" value="Mobile">Mobile
  </div>

  <div id="check-div2">
    <input type="checkbox" name="choices" id="charger-check" value="Charger">Charger
  </div>

  <div id="check-div3">
    <input type="checkbox" name="choices" id="headphone-check" value="Head Phone">Head Phone
  </div>
</div>

试试这个方法

Answer 2

您可能误解了 jquery selector 和 .each 函数的用法，在您的原始代码中您试图循环所有具有 id first-div 的元素。您可能想研究我的还原以获取更多信息 - https://jsfiddle.net/mc594hcy/

Answer 3

执行 console.log($('#first-div div input:checkbox')), 这将帮助您了解如何选择元素。那么你可以试试这个：

 $.each($('#first-div div input:checkbox'), function(index, value){
   var divValue = $(value).val(); 
 alert(divValue);  
 })

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="first-div">

    <div id="check-div1">
        <input type="checkbox" name="choices" id="mobile-check"
            value="Mobile">Mobile
    </div>

    <div id="check-div2">
        <input type="checkbox" name="choices" id="charger-check"
            value="Charger">Charger
    </div>

    <div id="check-div3">
        <input type="checkbox" name="choices" id="headphone-check"
            value="Head Phone">Head Phone
    </div>
</div>
</body>
</html>

JQuery - 使用 Each() 函数在元素内部移动

JQuery - travel inside of elements using Each() function

jquery-events