使用 jquery 读取父 div 中的所有输入类型

Question

我有一个添加电子邮件按钮，单击该按钮后，我想读取所有电子邮件地址文本框值，然后将其传递给ajax调用。我有相同类型的父div 为申请人上下文重复一次，为联系人上下文重复另一次。我只想阅读那些靠近点击按钮的电子邮件，即，如果我点击申请人下的添加按钮，只应阅读申请人的电子邮件，如果我点击联系人下方的按钮，则只应阅读这些电子邮件。

这是申请人的网页

<div id="divEmailPartial">
  <div id="divEmailRows">
  <div class="row" id="divEmail" style="">
    <div class="col-md-4">
            <div class="margin-bottom-10">
                <input class="form-control valid" id="Emails_0__EmailAddress" maxlength="30" name="Emails[0].EmailAddress" type="text" value="">
            </div>
        </div>
    </div>
    <div class="row" id="divEmail" style="">
        <div class="col-md-4">
                <div class="margin-bottom-10">
                    <input class="form-control valid" id="Emails_1__EmailAddress" maxlength="30" name="Emails[1].EmailAddress" type="text" value="">
                </div>
        </div>
    </div>
</div>
<div class="row">
        <div class="col-md-2">
            <button type="button" class="btn btn-link glyphicon glyphicon-plus-sign clsAddEmail" name="actionType" value="AddEmail" id="btnAddEmail"> add</button>
        </div>
</div>
</div>
<div id="divEmailPartial">
  <div id="divEmailRows">
  <div class="row" id="divEmail" style="">
    <div class="col-md-4">
            <div class="margin-bottom-10">
                <input class="form-control valid" id="Emails_0__EmailAddress" maxlength="30" name="Emails[0].EmailAddress" type="text" value="">
            </div>
        </div>
    </div>
    <div class="row" id="divEmail" style="">
        <div class="col-md-4">
                <div class="margin-bottom-10">
                    <input class="form-control valid" id="Emails_1__EmailAddress" maxlength="30" name="Emails[1].EmailAddress" type="text" value="">
                </div>
        </div>
    </div>
</div>
<div class="row">
        <div class="col-md-2">
            <button type="button" class="btn btn-link glyphicon glyphicon-plus-sign clsAddEmail" name="actionType" value="AddEmail" id="btnAddEmail"> add</button>
        </div>
</div>
</div>

这是我使用的jquery。

    var emailsList = new Array();

如果我使用它，我不会得到任何东西

    var emailRows = $(this).closest("#divEmailRows :input[type='text']");
    var emailRows = $("#divEmailRows :input[type='text']"); //this includes all inputs (applicants & contacts)
    emailRows.each(function () {
        var email = $(this).val();
        var controlId = $(this).attr("id");
        var controlName = $(this).attr("name");
        emailsList.push({ 'EmailAddress': email, 'ControlId': controlId, 'ControlName': controlName });
    });
    return emailsList;

请帮助我如何使用jquery读取所有输入文本值。

谢谢

塔拉克

Answer 1

根据您提供的 HTML，您需要首先找到最外层的div。在这种情况下，它将是按钮父级的父级。您可以使用parent()方法在 jQuery 中获取对象的父级。因此，在您的示例中，曾祖父母将是最外层div 的 id。注意：我使用类属性来查找按钮的div 父级，因为它们在您的 HTML 中没有 id。

var parent = $("#btnAddEmail").parent().prop("class");
var grandparent = $("." + parent).parent().prop("class");
var greatgrandparent = $("#" + grandparent).prop("id"); 

获得最外层的标记后，您将查找子输入元素并遍历它们以检查它们是否是文本输入，并对每个元素的电子邮件地址值进行操作。

$('#' + greatgrandparent).find("input").each(function () {
    if($(this).is( ":text" )){
      var emailAddress = $(this).val();//this is the value in the textbox
      //...do something with the email address
    }
});

Answer 2

感谢您的回复，根据您给我的想法，我将 id 更改为类，最后我可以解决我的问题。这就是我所做的。

var emailsList = new Array();
var emailRows = $(this).closest("div.divEmailPartial").find("div.divEmailRows :input[type='text']");
emailRows.each(function () {
var email = $(this).val();
var controlId = $(this).attr("id");
var controlName = $(this).attr("name");
emailsList.push({ 'EmailAddress': email, 'ControlId': controlId, 'ControlName': controlName });
    });
console.log(emailsList);

现在，我可以在最靠近单击它的添加按钮中获得可用的电子邮件。