javascript - 从同一类 div jquery 中查找不同的文本框值

Question

我有多个带有 class = "deleteDiv1" 的 div，每个 div 中有两个文本框。

我想遍历所有 deleteDiv1 并在每个 div 中找到 textbox 值。

<div class="row deleteDiv1">
    <div class="col-md-5">
        <div class="form-group form-group-xs spdfd">
            <label class="control-label col-lg-5">From</label>
            <div class="col-lg-7">
                <input type="number" disabled="disabled" value="1" class="form-control" placeholder="0">
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="form-group form-group-xs spdfd">
            <label class="control-label col-lg-5">To</label>
            <div class="col-lg-7">
                <input type="number" disabled="disabled" class="form-control" value="5" placeholder="0">
            </div>
        </div>
    </div>
    <div class="col-md-2 pl-5"><a class="text-warning delete-btn" id="1#5"><i class="icon-minus2"></i></a>
    </div>
</div>

<div class="row deleteDiv1">
    <div class="col-md-5">
        <div class="form-group form-group-xs spdfd">
            <label class="control-label col-lg-5">From</label>
            <div class="col-lg-7">
                <input type="number" disabled="disabled" value="3" class="form-control" placeholder="0">
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="form-group form-group-xs spdfd">
            <label class="control-label col-lg-5">To</label>
            <div class="col-lg-7">
                <input type="number" disabled="disabled" class="form-control" value="8" placeholder="0">
            </div>
        </div>
    </div>
    <div class="col-md-2 pl-5"><a class="text-warning delete-btn" id="3#8"><i class="icon-minus2"></i></a>
    </div>
</div>

    .... so on

我想做的是，

if ($('.deleteDiv1').length > 0) {
    $('.deleteDiv1').each(function(i, obj) {
        $(obj).children("input[type=number]").each(function() {
            alert($(this).val());
        });
    });
}

但这行不通。谁能帮帮我。

Answer 1

您可以使用 find() 而不是 children()。 children() 只查看节点的直接子节点，而 find() 遍历整个 DOM，直到找到您需要的元素:

$('.deleteDiv1').each(function(i, obj) {
  var $this = $(this);
  $this.find("input[type=number]").each(function() {
    var textBoxValue = $(this).val();
    console.log(textBoxValue);
    $this.find('.values').append(textBoxValue);
  });
});

.values{
  color: #F00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row deleteDiv1">
  <div class="col-md-5">
    <div class="form-group form-group-xs spdfd">
      <label class="control-label col-lg-5">From</label>
      <div class="col-lg-7">
        <input type="number" disabled="disabled" value="1" class="form-control" placeholder="0">
      </div>
    </div>
  </div>
  <div class="col-md-5">
    <div class="form-group form-group-xs spdfd">
      <label class="control-label col-lg-5">To</label>
      <div class="col-lg-7">
        <input type="number" disabled="disabled" class="form-control" value="5" placeholder="0">
      </div>
    </div>
  </div>
  <div class="col-md-2 pl-5"><a class="text-warning delete-btn" id="1#5"><i class="icon-minus2"></i></a>
  </div>
  <div class='values'></div>
</div>

<div class="row deleteDiv1">
  <div class="col-md-5">
    <div class="form-group form-group-xs spdfd">
      <label class="control-label col-lg-5">From</label>
      <div class="col-lg-7">
        <input type="number" disabled="disabled" value="3" class="form-control" placeholder="0">
      </div>
    </div>
  </div>
  <div class="col-md-5">
    <div class="form-group form-group-xs spdfd">
      <label class="control-label col-lg-5">To</label>
      <div class="col-lg-7">
        <input type="number" disabled="disabled" class="form-control" value="8" placeholder="0">
      </div>
    </div>
  </div>
  <div class="col-md-2 pl-5"><a class="text-warning delete-btn" id="3#8"><i class="icon-minus2"></i></a>
  </div>
  <div class='values'></div>
</div>