Question

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

这是申请人的HTML

<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中获取对象的父级。所以 greatgrandparent 将是你示例中最外层div的id。注意：我使用了class属性来查找按钮的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);

现在，我可以在添加按钮中找到最接近点击添加内容的电子邮件。

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

2 个答案: