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

我动态生成了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>

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

---

请帮帮我

您可以使用

$this

与

find（）

---

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

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

遍历父

空间

，然后使用

.find（）

以

元素为目标

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

---

动态生成东西时可以做的一件事是，还可以动态生成javascript

这也有一些缺点，但在许多情况下，它是非常有用的

razor中的示例：

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

$this.find（“#divtag@{id}”）.each（function（）{}）；

函数fetchData（）{
var numItems=$（“.space”）.length；
$（'.space'）。每个（函数（i，obj）{
var$this=$（this）；
$this.find（“输入[type=text]”）。每个（函数（）{
var textBoxValue=$（this.val（）；
var selectValues=$this.find（“select”）.val（）；
console.log（textBoxValue）；
console.log（选择值）；
});
});
}
fetchData（）

选择Phone WhatapFaceBookWebFax联系人类型是必需的
触点类型值是必需的
选择Phone WhatapFaceBookWebFax联系人类型是必需的
触点类型值是必需的
另一种简单的方法是对所需元素使用
serialize（）
方法：


var data=$（.space”）.find（“输入，选择”）.serialize（）；
console.log（数据）

选择Phone WhatapFaceBookWebFax联系人类型是必需的
触点类型值是必需的
选择Phone WhatapFaceBookWebFax联系人类型是必需的
触点类型值是必需的
谢谢大家。。。。。
var selectValues = $(this).closest(".space").find("select").val();

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