javascript - 分别获取第二个选择器 jQuery 的对应值

Question

HTML 如下:

<div class="sltbsummry collection">
    <div class="sltabsecondrow">
        <div> <small>Schedule</small>
        </div>
        <div> <small>Amount</small>
        </div>
    </div>
    <div class="planContainer">
        <div class="sltabsecondrow">
            <div>
                <span>
                    <input type="text" value="11-02-2019" class="schDate inputFld" readonly="">
                </span>
                <span class="pull-right">
                    <i class="fa fa-calendar"></i>
                </span>
            </div>
            <div>
                <span>
                    <input type="text" value="10000000" class="schAmt inputFld">
                </span>
                <span>
                    <a title="Remove Row" class="remRow" href="javascript:void(0);" style="display: inline;">
                        <i class="fas fa-times-circle"></i></a>
                </span>
            </div>
        </div>
        <div class="sltabsecondrow">
            <div>
                <span>
                    <input type="text" class="schDate" readonly="">
                </span>
                <span class="pull-right">
                    <i class="fa fa-calendar"></i>
                </span>
            </div>
            <div>
                <span>
                    <input type="text" class="schAmt">
                </span>
                <span>
                    <a title="Remove Row" class="remRowAdd" href="javascript:void(0);">
                        <i class="fas fa-times-circle"></i></a>
                </span>
            </div>
        </div>
        <div class="sltabsecondrow">
            <div>
                <span>
                    <input type="text" class="schDate" readonly="">
                </span>
                <span class="pull-right">
                    <i class="fa fa-calendar"></i>
                </span>
            </div>
            <div>
                <span>
                    <input type="text" class="schAmt">
                </span>
                <span>
                    <a title="Remove Row" class="remRowAdd" href="javascript:void(0);">
                        <i class="fas fa-times-circle"></i></a>
                </span>
            </div>
        </div>
        <div class="sltabsecondrow">
            <div>
                <span>
                    <input type="text" class="schDate" readonly="">
                </span>
                <span class="pull-right">
                    <i class="fa fa-calendar"></i>
                </span>
            </div>
            <div>
                <span>
                    <input type="text" class="schAmt">
                </span>
                <span>
                    <a title="Remove Row" class="remRowAdd" href="javascript:void(0);">
                        <i class="fas fa-times-circle"></i></a>
                </span>
            </div>
        </div>
    </div>
</div>

上图显示了一个字段集，其中“计划”和“金额”相互关联。必须使用每行值形成一个数据集，例如:

[
{date:11/02/2019,amt:1000000},
{date:13-02-2019,amt:1111},
{date:21-02-2019,amt:222}... so on
]

尝试了以下迭代，但我无法弄清楚如何获取 schAmt 的相应值(.schDate 是日期字段的选择器，.schAmt 是金额)

 jQuery('.schDate,.schAmt').each(function(){
       //when loop is over .schDate how to get corresponding .schAmt value?
 });

这可以通过分配相应的索引来完成，但我想知道像这样的循环是否会避免过度杀伤并始终产生正确设置的相应值？

Answer 1

您需要做的是迭代输入元素的公共(public)父元素，例如.sltabsecondrow，使用.map()您需要检查该元素是否确实包含您想要的输入元素。如果它们确实存在，您只需返回该对象，该对象将按照您的预期创建一个对象数组。

要在每次迭代中访问正确的输入元素，请提供 this 作为选择器中的第二个参数，它定义必须在其中找到该元素的上下文，例如$('.schDate', this)。这相当于使用 $(this).find('.schDate')，只是稍微简洁一点。

最后，你想链接 .get()最后，以便将 jQuery 对象转换回 native JS 数组。

var data = jQuery('.sltabsecondrow').map(function() {
  var $date = $('.schDate', this);
  var $amt = $('.schAmt', this);

  // Check if both input elements exist
  // If not, return nothing
  if (!$date.length || !$amt.length)
    return;

  return {
    date: $date.val(),
    amt: $amt.val()
  };
}).get();

使用 .map() 相对于 .each() 的优点是，您不需要在循环外部定义另一个变量来存储数据。

请参阅下面的概念验证:

jQuery(document).ready(function() {
  var data = jQuery('.sltabsecondrow').map(function() {
    var $date = $('.schDate', this);
    var $amt = $('.schAmt', this);
    
    // Check if both input elements exist
    // If not, return nothing
    if (!$date.length || !$amt.length)
      return;
    
    return {
      date: $date.val(),
      amt: $amt.val()
    };
  }).get();
  console.log(data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sltbsummry collection">
  <div class="sltabsecondrow">
    <div> <small>Schedule</small>
    </div>
    <div> <small>Amount</small>
    </div>
  </div>
  <div class="planContainer">
    <div class="sltabsecondrow">
      <div>
        <span>
                    <input type="text" value="11-02-2019" class="schDate inputFld" readonly="">
                </span>
        <span class="pull-right">
                    <i class="fa fa-calendar"></i>
                </span>
      </div>
      <div>
        <span>
                    <input type="text" value="10000000" class="schAmt inputFld">
                </span>
        <span>
                    <a title="Remove Row" class="remRow" href="javascript:void(0);" style="display: inline;">
                        <i class="fas fa-times-circle"></i></a>
                </span>
      </div>
    </div>
    <div class="sltabsecondrow">
      <div>
        <span>
                    <input type="text" class="schDate" readonly="">
                </span>
        <span class="pull-right">
                    <i class="fa fa-calendar"></i>
                </span>
      </div>
      <div>
        <span>
                    <input type="text" class="schAmt">
                </span>
        <span>
                    <a title="Remove Row" class="remRowAdd" href="javascript:void(0);">
                        <i class="fas fa-times-circle"></i></a>
                </span>
      </div>
    </div>
    <div class="sltabsecondrow">
      <div>
        <span>
                    <input type="text" class="schDate" readonly="">
                </span>
        <span class="pull-right">
                    <i class="fa fa-calendar"></i>
                </span>
      </div>
      <div>
        <span>
                    <input type="text" class="schAmt">
                </span>
        <span>
                    <a title="Remove Row" class="remRowAdd" href="javascript:void(0);">
                        <i class="fas fa-times-circle"></i></a>
                </span>
      </div>
    </div>
    <div class="sltabsecondrow">
      <div>
        <span>
                    <input type="text" class="schDate" readonly="">
                </span>
        <span class="pull-right">
                    <i class="fa fa-calendar"></i>
                </span>
      </div>
      <div>
        <span>
                    <input type="text" class="schAmt">
                </span>
        <span>
                    <a title="Remove Row" class="remRowAdd" href="javascript:void(0);">
                        <i class="fas fa-times-circle"></i></a>
                </span>
      </div>
    </div>
  </div>
</div>

<小时/>

奖金

您也可以在 vanilla JS 中执行与上面相同的逻辑;)

ES5

var rows = document.querySelectorAll('.sltabsecondrow');
var data = Array.prototype.map.call(rows, function(row) {
    var date = row.querySelector('.schDate');
    var amt = row.querySelector('.schAmt');

    if (!date || !amt)
        return;

    return {
        date: date.value,
        amt: amt.value
    };
}).filter(function(datum) { return !!datum; });

ES6

const rows = document.querySelectorAll('.sltabsecondrow');
const data = Array.from(rows).map(row => {
    const date = row.querySelector('.schDate');
    const amt = row.querySelector('.schAmt');

    if (!date || !amt)
        return;

    return {
        date: date.value,
        amt: amt.value
    };
}).filter(datum=> !!datum);