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

时间：2019-02-22 09:51:42

标签： javascript jquery

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>

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

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

这可以通过分配相应的索引来完成，但我想知道这样的循环是否可以节省过多的开销并始终正确设置相应的值？

3 个答案:

答案 0 :(得分：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>

奖金

您也可以在普通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 :(得分：1)

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

那么您可以做：

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

答案 2 :(得分：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];
  // ...
}
相关问题
最新问题