javascript - 动态获取输入/选择值而无需直接定位-Javascript

我有一组列表项，其中包含输入并在其中选择框。我试图遍历列表项，获取其中的值，然后基于这些数字运行一个函数，结果推入数组。不幸的是，我正在努力使点击功能的结构正确。

计算功能

function calculateSum(power, amountItem, usage) {
    var finalSum;

    if (power && amountItem && usage != null) {
        finalSum = (power * amountItem * usage)/1000;
    } else {
        console.log('Parameters not passed into calculateSum function');
    }
    return finalSum;
};

单击功能-我正在努力的部分。

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

HTML Li结构示例

<ul id="calculation-options">
<li id="item-1">
    <div>
        <img data-name="item-1" id="item-1" src="img/item1.png" alt="Begin Process"/>
    </div>
        <div class="controls-wrapper">
            <div class="controls-wrapper-inner">
              <input name="quantity" class="quantity-output quantity-value-1" value="5">
                  <div class="controls-wrapper-selector">
                    <a data-id="1" class="minus">-</a>
                    <a data-id="1" class="plus">+</a>
                  </div>
            </div>
        </div>
        <div class="power">
            <select>
              <option selected="selected" value="POWER">Power</option>
              <option value="70">70w</option>
              <option value="100">100w</option>
            </select>
        </div>
        <div class="Usage">
            <select>
              <option selected="selected" value="usage">Usage</option>
              <option value="1">1 Hours</option>
              <option value="2">2 Hours</option>
            </select>
        </div>
</li>
<li id="item-2">
    <div>
        <img data-name="item-2" id="item-2" src="img/item2.png" alt="Begin Process"/>
    </div>
        <div class="controls-wrapper">
            <div class="controls-wrapper-inner">
              <input name="quantity" class="quantity-output quantity-value-1" value="5">
                  <div class="controls-wrapper-selector">
                    <a data-id="1" class="minus">-</a>
                    <a data-id="1" class="plus">+</a>
                  </div>
            </div>
        </div>
        <div class="power">
            <select>
              <option selected="selected" value="POWER">Power</option>
              <option value="70">70w</option>
              <option value="100">100w</option>
            </select>
        </div>
        <div class="Usage">
            <select>
              <option selected="selected" value="usage">Usage</option>
              <option value="1">1 Hours</option>
              <option value="2">2 Hours</option>
            </select>
        </div>
</li>
</ul>
<a id="calculate-this">Calculate This!</a>

任何方向都很好！

d

最佳答案

jQueryElement.each( ... )接受带有2个参数的函数引用，第一个是索引，第二个是元素。充分利用该元素。

$('#calculation-options li').each( function( i, elem ) {
  console.log( $(elem).find( 'option:selected' ) );
} );