Title: Dynamically grabbing input / select values without direct targeting - Javascript
Tags: javascript;jquery;html;arrays
Question: I have a set of list items that hold input and select boxes inside of them. Im attempting to loop through the list items, grab the values inside of them then run a function based on those figures with the result pushing into an array. Im struggling to get the structure right of my click function unfortunately.
Calculation Function
function calculateSum(power, amountItem, usage) {
var finalSum;
if (power &amp;&amp; amountItem &amp;&amp; usage != null) {
finalSum = (power * amountItem * usage)/1000;
} else {
console.log('Parameters not passed into calculateSum function');
return finalSum;
Click Function - The part where I'm struggling.
calculationsArray = [];
$('#calculate-this').on('click', function(){
$('#calculation-options li').each( function() {
var power = $('.wattage select').val();
var amount = $('.quantity-output').val();
var usage = $('.usage select').val();
var calculationResult = calculateSum(power, amount,usage);
console.log(calculationResult);
calculationsArray.push(calculationResult);
});
});
Example HTML Li Structure
<ul id="calculation-options"&gt;
<li id="item-1"&gt;
<div&gt;
<img data-name="item-1" id="item-1" src="img/item1.png" alt="Begin Process"/&gt;
</div&gt;
<div class="controls-wrapper"&gt;
<div class="controls-wrapper-inner"&gt;
<input name="quantity" class="quantity-output quantity-value-1" value="5"&gt;
<div class="controls-wrapper-selector"&gt;
<a data-id="1" class="minus"&gt;-</a&gt;
<a data-id="1" class="plus"&gt;+</a&gt;
</div&gt;
</div&gt;
</div&gt;
<div class="power"&gt;
<select&gt;
<option selected="selected" value="POWER"&gt;Power</option&gt;
<option value="70"&gt;70w</option&gt;
<option value="100"&gt;100w</option&gt;
</select&gt;
</div&gt;
<div class="Usage"&gt;
<select&gt;
<option selected="selected" value="usage"&gt;Usage</option&gt;
<option value="1"&gt;1 Hours</option&gt;
<option value="2"&gt;2 Hours</option&gt;
</select&gt;
</div&gt;
</li&gt;
<li id="item-2"&gt;
<div&gt;
<img data-name="item-2" id="item-2" src="img/item2.png" alt="Begin Process"/&gt;
</div&gt;
<div class="controls-wrapper"&gt;
<div class="controls-wrapper-inner"&gt;
<input name="quantity" class="quantity-output quantity-value-1" value="5"&gt;
<div class="controls-wrapper-selector"&gt;
<a data-id="1" class="minus"&gt;-</a&gt;
<a data-id="1" class="plus"&gt;+</a&gt;
</div&gt;
</div&gt;
</div&gt;
<div class="power"&gt;
<select&gt;
<option selected="selected" value="POWER"&gt;Power</option&gt;
<option value="70"&gt;70w</option&gt;
<option value="100"&gt;100w</option&gt;
</select&gt;
</div&gt;
<div class="Usage"&gt;
<select&gt;
<option selected="selected" value="usage"&gt;Usage</option&gt;
<option value="1"&gt;1 Hours</option&gt;
<option value="2"&gt;2 Hours</option&gt;
</select&gt;
</div&gt;
</li&gt;
</ul&gt;
<a id="calculate-this"&gt;Calculate This!</a&gt;
Any direction would be great!
Comment: Thanks for your comment code - apologies, I've just added these in, unfortunately the code I missed out is the part I'm struggling with.

Comment: Are you missing some of the code? you dont have a button in the html, and 3 variables are missing values altogether

Here is the accepted answer: jQueryElement.each( ... ) takes a function reference with 2 parameters, the first being an index and the second being an element. Use that element to your advantage.
$('#calculation-options li').each( function( i, elem ) {
console.log( $(elem).find( 'option:selected' ) );
Comment for this answer: Seems like the perfect way to get the information - thanks!


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:09/29/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><html><arrays>', 'Title': 'Dynamically grabbing input / select values without direct targeting - Javascript', 'ViewCount': 66, 'id': 32850773, 'user_AboutMe': None, 'user_AccountId': 348937.0, 'user_DisplayName': 'DIM3NSION', 'user_Reputation': 1621.0, 'user_Views': 226.0, 'user_id': 683924.0}}