遍歷元素的子元素

Question

我想遍歷一個元素數組，並查詢每個元素的子元素

到目前為止，我已經嘗試過

$.each($("#new_shipment .package_dimensions .package_dimension"), function() {
      var amount = $(this).children('observe.amount').val()
      var weight = $(this).children('observe.weight').val()
      console.log(amount);
      console.log(weight);

HTML”

<h2>Packages</h2>
          <div class='packages form_pane'>
            <div class='package_dimensions'>
              <div class='dimensions_text'>
                <p>Dimensions in cm/kg</p>
              </div>
              <div class='labels'>
                <label>Amount</label>
                <label>Length</label>
                <label>Width</label>
                <label>Height</label>
                <label>Weight</label>
              </div>
              <div class='dimensions'>
                <div class='package_dimension' data-row-id='0' id='package_dimension_0'>
                  <div class="input string required shipment_package_dimensions_amount"><input class="string required observe amount" id="shipment_package_dimensions_0_amount" name="shipment[package_dimensions][0][amount]" type="text" /></div>
                  <div class='math_label'>×</div>
                  <div class="input string required shipment_package_dimensions_length"><input class="string required observe length" id="shipment_package_dimensions_0_length" name="shipment[package_dimensions][0][length]" type="text" value="15" /></div>
                  <div class='math_label'>×</div>
                  <div class="input string required shipment_package_dimensions_width"><input class="string required observe width" id="shipment_package_dimensions_0_width" name="shipment[package_dimensions][0][width]" type="text" value="12" /></div>
                  <div class='math_label'>×</div>
                  <div class="input string required shipment_package_dimensions_height"><input class="string required observe height" id="shipment_package_dimensions_0_height" name="shipment[package_dimensions][0][height]" type="text" value="10" /></div>
                  <div class='math_label'>&nbsp;</div>
                  <div class="input string required shipment_package_dimensions_weight"><input class="string required observe_weight" id="shipment_package_dimensions_0_weight" name="shipment[package_dimensions][0][weight]" type="text" value="10.0" /></div>
                </div>
                ......
             </div>

但是，當我記錄數量和重量的結果時，我不確定

有任何想法嗎？

Answer 1

當在children()使用類observe時，您會缺少類選擇器（ . children() 。 你也應該使用.find()代替.children()作為輸入元素沒有選擇DIV的直接子：

$.each($("#new_shipment .package_dimensions .package_dimension"), function() {
  var amount = $(this).find('.observe.amount').val()
  var weight = $(this).find('.observe_weight').val()
  console.log(amount);
  console.log(weight);
 });