遍历元素的子元素

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