时间戳

首页 > 解决方案 > 获取 div 输入子值

javascript - 获取 div 输入子值

问题描述

我试图从一组 div 中包含的三个输入中获取值，但只有不属于的 edivinvisible-age-range-row

<div class="row">
  <div class="col-md-7 col-xs-12 dist-element-row">
    <label>Franjas de edad</label>
    <div class="row age-range-row">
      <div class="col-md-2">
        <label>Desde</label>
        <input type="number" min="0" class="form-control from" value="1">
      </div>
      <div class="col-md-2">
        <label>Hasta</label>
        <input type="number" min="0" class="form-control to" value="2">
      </div>
      <div class="col-md-2">
        <label>%</label>
        <input type="number" min="0" max="100" class="form-control percentage" value="20">
      </div>
      <div class="col-md-6 options-cell">
        <button class="btn btn-primary add-range">+</button>
        <button class="btn btn-default delete-range">-</button>
      </div>
    </div>
    <div class="row age-range-row invisible-age-range-row">
      <div class="col-md-2">
        <label>Desde</label>
        <input type="number" min="0" class="form-control from" value="3">
      </div>
      <div class="col-md-2">
        <label>Hasta</label>
        <input type="number" min="0" class="form-control to" value="4">
      </div>
      <div class="col-md-2">
        <label>%</label>
        <input type="number" min="0" max="100" class="form-control percentage" value="5">
      </div>
      <div class="col-md-6 options-cell">
        <button class="btn btn-primary add-range">+</button>
        <button class="btn btn-default delete-range">-</button>
      </div>
    </div>
    <div class="row age-range-row invisible-age-range-row">
      <div class="col-md-2">
        <label>Desde</label>
        <input type="number" min="0" class="form-control from">
      </div>
      <div class="col-md-2">
        <label>Hasta</label>
        <input type="number" min="0" class="form-control to">
      </div>
      <div class="col-md-2">
        <label>%</label>
        <input type="number" min="0" max="100" class="form-control percentage">
      </div>
      <div class="col-md-6 options-cell">
        <button class="btn btn-primary add-range">+</button>
        <button class="btn btn-default delete-range">-</button>
      </div>
    </div>
    <div class="row age-range-row invisible-age-range-row">
      <div class="col-md-2">
        <label>Desde</label>
        <input type="number" min="0" class="form-control from">
      </div>
      <div class="col-md-2">
        <label>Hasta</label>
        <input type="number" min="0" class="form-control to">
      </div>
      <div class="col-md-2">
        <label>%</label>
        <input type="number" min="0" max="100" class="form-control percentage">
      </div>
      <div class="col-md-6 options-cell">
        <button class="btn btn-primary add-range">+</button>
        <button class="btn btn-default delete-range">-</button>
      </div>
    </div>
    <div class="row age-range-row invisible-age-range-row">
      <div class="col-md-2">
        <label>Desde</label>
        <input type="number" min="0" class="form-control from">
      </div>
      <div class="col-md-2">
        <label>Hasta</label>
        <input type="number" min="0" class="form-control to">
      </div>
      <div class="col-md-2">
        <label>%</label>
        <input type="number" min="0" max="100" class="form-control percentage">
      </div>
      <div class="col-md-6 options-cell">
        <button class="btn btn-primary add-range">+</button>
        <button class="btn btn-default delete-range">-</button>
      </div>
    </div>
    <div class="row age-range-row invisible-age-range-row">
      <div class="col-md-2">
        <label>Desde</label>
        <input type="number" min="0" class="form-control from">
      </div>
      <div class="col-md-2">
        <label>Hasta</label>
        <input type="number" min="0" class="form-control to">
      </div>
      <div class="col-md-2">
        <label>%</label>
        <input type="number" min="0" max="100" class="form-control percentage">
      </div>
      <div class="col-md-6 options-cell">
        <button class="btn btn-primary add-range">+</button>
        <button class="btn btn-default delete-range">-</button>
      </div>
    </div>
    <div class="row age-range-row invisible-age-range-row">
      <div class="col-md-2">
        <label>Desde</label>
        <input type="number" min="0" class="form-control from">
      </div>
      <div class="col-md-2">
        <label>Hasta</label>
        <input type="number" min="0" class="form-control to">
      </div>
      <div class="col-md-2">
        <label>%</label>
        <input type="number" min="0" max="100" class="form-control percentage">
      </div>
      <div class="col-md-6 options-cell">
        <button class="btn btn-primary add-range">+</button>
        <button class="btn btn-default delete-range">-</button>
      </div>
    </div>
    <div class="row age-range-row invisible-age-range-row">
      <div class="col-md-2">
        <label>Desde</label>
        <input type="number" min="0" class="form-control from">
      </div>
      <div class="col-md-2">
        <label>Hasta</label>
        <input type="number" min="0" class="form-control to">
      </div>
      <div class="col-md-2">
        <label>%</label>
        <input type="number" min="0" max="100" class="form-control percentage">
      </div>
      <div class="col-md-6 options-cell">
        <button class="btn btn-primary add-range">+</button>
        <button class="btn btn-default delete-range">-</button>
      </div>
    </div>
    <div class="row age-range-row invisible-age-range-row">
      <div class="col-md-2">
        <label>Desde</label>
        <input type="number" min="0" class="form-control from">
      </div>
      <div class="col-md-2">
        <label>Hasta</label>
        <input type="number" min="0" class="form-control to">
      </div>
      <div class="col-md-2">
        <label>%</label>
        <input type="number" min="0" max="100" class="form-control percentage">
      </div>
      <div class="col-md-6 options-cell">
        <button class="btn btn-primary add-range">+</button>
        <button class="btn btn-default delete-range">-</button>
      </div>
    </div>
    <div class="row age-range-row invisible-age-range-row">
      <div class="col-md-2">
        <label>Desde</label>
        <input type="number" min="0" class="form-control from">
      </div>
      <div class="col-md-2">
        <label>Hasta</label>
        <input type="number" min="0" class="form-control to">
      </div>
      <div class="col-md-2">
        <label>%</label>
        <input type="number" min="0" max="100" class="form-control percentage">
      </div>
      <div class="col-md-6 options-cell">
        <button class="btn btn-primary add-range">+</button>
        <button class="btn btn-default delete-range">-</button>
      </div>
    </div>
  </div>
</div>

我以这种方式获取 div

var ranges = $('.age-range-row').not('.invisible-age-range-row');

但我无法以这种方式访问​​输入值：

ranges.each(function(range) {
    var elements = [];
    console.log(range);
    elements.push(range.find('.from'));
    elements.push(range.find('.to'));
    elements.push(range.find('.percentage'));
    stored_ranges.push(elements);
});

标签： javascriptjquery

解决方案

每个函数的第一个参数是指元素的索引。您需要将范围用作第二个元素才能用作元素选择器：

  ranges.each(function(index,range){
           var elements = [];
           console.log(range);
           elements.push(range.find('.from'));
           elements.push(range.find('.to'));
           elements.push(range.find('.percentage'));
           stored_ranges.push(elements);
       });

推荐阅读