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

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