获取第二个选择器jQuery的相应值

问题描述 投票：0回答：3

Corresponding fields

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>

上图显示了一个字段集，其中Schedule和Amount彼此相互关联。必须使用每个行值形成数据集，如：

[
{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?
 });

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

javascript jquery
3个回答
2
投票

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

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

最后，您想在最后链接.get()，以便将jQuery对象转换回本机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);
1
投票

在包含匹配日期和金额的行中添加一个类，我们称之为schRow。

然后你可以这样做：

jQuery('.schRow').each(function() {
  var $date = jQuery('.schDate', this);
  var $amount = jQuery('.schAmt', this);
  ... your code
});
0
投票

您可以迭代日期和金额：

var dates = jQuery('.schDate');
var amts = jQuery('.schAmt');

for(var i = 0; i < dates.length; i++ {
  var date = dates[i];
  var amt = amts[i];
  // ...
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.