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

我有一个addemail按钮，单击该按钮，我想读取所有Email地址文本框值，然后将其传递给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>

//如果我用这个我什么都得不到

    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读取所有输入文本值

谢谢

---

Tarak

根据您提供的HTML，您需要首先找到最外层的div。在本例中，它将是按钮父级的父级。您可以使用

parent（）

方法在jQuery中获取对象的父对象。因此，在您的示例中，曾祖父母将是最外层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
    }
});

---

谢谢你的回复，有了你给我的想法，我把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);

---

现在，我可以在最靠近所单击的加载项的“添加”按钮中获取可用的电子邮件。

input:text

应选择所有文本框，或在其上放置一个公共类并使用该类。正如你所看到的那样，

。表单控件

可以工作，但我通常避免在选择器中使用插件类，选择我自己创建的不应更改且更可读的类。嗨，Taplar，我刚刚更新了我的查询，提供了更详细的信息，你能看一下并帮我解决这方面的问题吗，感谢可能重复的您不能在页面上重复ID。这是无效的标记。将它们更改为类。好的，我可以将它们更改为类，您可以帮助我使用jquery脚本代码吗？@Tarak，我编辑了答案并用您的HTML进行了测试。正如塔普拉在上面的评论中指出的那样，确保您更正了重复的id。请参见此处的完整jfiddle：

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