从同一个类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

检查一下，

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

             });
         }

我希望这有助于解决您的问题。

编辑

这是迄今为止children and find之间差异的最佳示例。

Answer 2

您可以使用find()代替children()。 children()仅查看节点的直接子节点，而find()遍历整个DOM，直到找到您需要的元素：

＆＃13;

＆＃13;

$('.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);
  });
});

＆＃13;

.values{
  color: #F00;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以在选择器each()中使用一个.deleteDiv1 input[type=number]，因此无需.children()和第二each()：

$('.deleteDiv1 input[type=number]').each(function (i, v) {
    console.log($(this).val());
});

希望这有帮助。

＆＃13;

＆＃13;

$('.deleteDiv1 input[type=number]').each(function (i, v) {
  console.log($(this).val());
});

＆＃13;

<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>

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

＆＃13;

＆＃13;

$('.deleteDiv1').each(function(i, obj) {
  $('input[type=number]', obj).each(function() {
    alert($(this).val());
  });

});

＆＃13;

<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>

<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>

＆＃13;

＆＃13;

＆＃13;

你可以试试这种方式