Question

我已经动态生成了html，如

<div id="dynamic-contact-details" class="col-sm-7">
    <div id="count0" class="space">
        <div class="col-sm-3">
            <select id="contact-type0" class="form-control"><option value="">Select</option><option value="Phone">Phone</option><option value="Whatapp">Whatapp</option><option value="Facebook">Facebook</option><option value="Web">Web</option><option value="Fax">Fax</option></select><small id="contact-type0" class="text-danger hide">Contact Type is Required</small>
        </div>
        <div class="col-sm-8">
            <input type="text" name="contact-type-value0" id="contact-type-value0" class="form-control"><small id="contact-type-value0" class="text-danger hide">Contact Type Value is Required</small>
        </div>
        <button value="count0" class="remove_field btn btn-white"><i class="fa fa-trash"></i></button></div>
    <div id="count2" class="space">
        <div class="col-sm-3">
            <select id="contact-type2" class="form-control"><option value="">Select</option><option value="Phone">Phone</option><option value="Whatapp">Whatapp</option><option value="Facebook">Facebook</option><option value="Web">Web</option><option value="Fax">Fax</option></select><small id="contact-type2" class="text-danger hide">Contact Type is Required</small>
        </div>
        <div class="col-sm-8">
            <input type="text" name="contact-type-value2" id="contact-type-value2" class="form-control"><small id="contact-type-value2" class="text-danger hide">Contact Type Value is Required</small>
        </div>
        <button value="count2" class="remove_field btn btn-white"><i class="fa fa-trash"></i></button>
    </div>
</div>

在jquery中

var numItems = $(".space").length;
$('.space').each(function(i, obj) {
    var $this = $(this);
    $this.find("input[type=text]").each(function() {
        var textBoxValue = $(this).val();
        var selectValues = $(".space select").val();
        console.log(textBoxValue);
    });
});

我正在尝试在同一代码中获取选择值。它总是在所有迭代中获得一个值。我想对这两个值执行一些操作，这就是为什么我试图调整上面的代码来获取同一循环中的两个值。

请帮帮我!!!

Answer 1

您可以使用$this引用space和find()

var selectValues = $this.find("select").val();

由于您只有一个输入元素，您可以使用它来在单次迭代中定位它们

var numItems = $(".space").length;
$('.space').each(function(i, obj) {
    var $this = $(this);
    var selectValues = $this.find("select").val();
    var textBoxValue = $this.find("input[type=text]").val();
    console.log(selectValues, textBoxValue);
});

~~您可以使用.closest()遍历父space，然后使用.find()定位<select>元素~~

~~var selectValues = $(this).closest(".space").find("select").val();~~

Answer 2

动态生成事物时，你可以做的一件事是你也可以动态地生成javascript。

这有一些缺点，但在很多情况下它非常有用。

剃刀中的例子：

<div id="divtag@{id}"></div>
<script>
$this.find("#divtag@{id}").each(function() {});
</script>

Answer 3

＆＃13;

function fetchData(){
  var numItems = $(".space").length;
  $('.space').each(function(i, obj) {
      var $this = $(this);
      $this.find("input[type=text]").each(function() {
          var textBoxValue = $(this).val();
          var selectValues = $this.find("select").val();
          console.log(textBoxValue);
          console.log(selectValues);
      });
  });
}

fetchData();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dynamic-contact-details" class="col-sm-7">
    <div id="count0" class="space">
        <div class="col-sm-3">
            <select id="contact-type0" class="form-control"><option value="">Select</option><option value="Phone">Phone</option><option value="Whatapp">Whatapp</option><option value="Facebook">Facebook</option><option value="Web">Web</option><option value="Fax">Fax</option></select><small id="contact-type0" class="text-danger hide">Contact Type is Required</small>
        </div>
        <div class="col-sm-8">
            <input type="text" name="contact-type-value0" id="contact-type-value0" class="form-control"><small id="contact-type-value0" class="text-danger hide">Contact Type Value is Required</small>
        </div>
        <button value="count0" class="remove_field btn btn-white"><i class="fa fa-trash"></i></button></div>
    <div id="count2" class="space">
        <div class="col-sm-3">
            <select id="contact-type2" class="form-control"><option value="">Select</option><option value="Phone">Phone</option><option value="Whatapp">Whatapp</option><option value="Facebook">Facebook</option><option value="Web">Web</option><option value="Fax">Fax</option></select><small id="contact-type2" class="text-danger hide">Contact Type is Required</small>
        </div>
        <div class="col-sm-8">
            <input type="text" name="contact-type-value2" id="contact-type-value2" class="form-control"><small id="contact-type-value2" class="text-danger hide">Contact Type Value is Required</small>
        </div>
        <button value="count2" class="remove_field btn btn-white"><i class="fa fa-trash"></i></button>
    </div>
</div>

＆＃13;

Answer 4

另一种简单的方法是对所需的元素使用serialize()方法：

＆＃13;

var data = $(".space").find("input, select").serialize();
console.log(data)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dynamic-contact-details" class="col-sm-7">
    <div id="count0" class="space">
        <div class="col-sm-3">
            <select id="contact-type0" class="form-control" name="select1"><option value="">Select</option><option value="Phone" selected>Phone</option><option value="Whatapp">Whatapp</option><option value="Facebook">Facebook</option><option value="Web">Web</option><option value="Fax">Fax</option></select><small id="contact-type0" class="text-danger hide">Contact Type is Required</small>
        </div>
        <div class="col-sm-8">
            <input type="text" name="contact-type-value0" id="contact-type-value0" class="form-control"><small id="contact-type-value0" class="text-danger hide">Contact Type Value is Required</small>
        </div>
        <button value="count0" class="remove_field btn btn-white"><i class="fa fa-trash"></i></button></div>
    <div id="count2" class="space">
        <div class="col-sm-3">
            <select id="contact-type2" class="form-control" name="select2"><option value="">Select</option><option value="Phone">Phone</option><option value="Whatapp" selected>Whatapp</option><option value="Facebook">Facebook</option><option value="Web">Web</option><option value="Fax">Fax</option></select><small id="contact-type2" class="text-danger hide">Contact Type is Required</small>
        </div>
        <div class="col-sm-8">
            <input type="text" name="contact-type-value2" id="contact-type-value2" class="form-control"><small id="contact-type-value2" class="text-danger hide">Contact Type Value is Required</small>
        </div>
        <button value="count2" class="remove_field btn btn-white"><i class="fa fa-trash"></i></button>
    </div>
</div>

＆＃13;

＆＃13;
请注意，要使用此方法，您必须将name属性添加到select。

如何从同一div中存在的多个html元素动态获取值？

4 个答案: