2016-08-24 25 views
0

如何使用每個函數在JQuery中的元素內部移動?JQuery - 使用Each()函數在元素內部移動

考慮這是我的元素結構:

<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 
    }); 

回答

0

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

嘗試這種方式

0

你可能錯誤理解jquery selector的使用和.each功能,在您的原始代碼您正嘗試循環所有編號爲first-div的元素。你可能想研究我的反向更多信息 - https://jsfiddle.net/mc594hcy/

0

做一個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>