У меня есть несколько div с class = "deleteDiv1", в каждом div есть два текстовых поля.

Я хочу просмотреть все deleteDiv1 и найти textbox значения в каждом 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="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());
        });
    });
}

Но это не работает. Кто-нибудь может мне помочь.

1
Johny Bravo 11 Янв 2017 в 12:36

4 ответа

Лучший ответ

Вы можете использовать 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>
1
Ionut Necula 11 Янв 2017 в 10:02

Проверь это,

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

             });
         }

Я надеюсь, что это поможет решить вашу проблему.

< Сильный > ИЗМЕНИТЬ

Это лучший пример различия между детьми и находками пока.

1
Rahul 11 Янв 2017 в 09:39
$('.deleteDiv1').each(function(i, obj) {
  $('input[type=number]', obj).each(function() {
    alert($(this).val());
  });

});
<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>

Вы можете попробовать этот способ

0
guradio 11 Янв 2017 в 09:40

Вы можете использовать один each() с селектором .deleteDiv1 input[type=number], поэтому нет нужды в .children() и втором each():

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

Надеюсь это поможет.

$('.deleteDiv1 input[type=number]').each(function (i, v) {
  console.log($(this).val());
});
<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>
0
Zakaria Acharki 11 Янв 2017 в 09:49