Javascript 使用jQuery为foreach中的每个元素调用函数

我有一个视图模型，它有一个如下所示的数据网格

<table>
@foreach (var item in Model)
                        //for(int i=0;i<Model.Count();i++)
                        {
                            using (Html.BeginForm("Edit", "Views", FormMethod.Post))
                            {
                                <tr>
                                    <td>
                                        @Html.TextBoxFor(modelItem => item.Description, new { id = "description" })

                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.DisplayAt, new { id = "displayat" })
                                    </td>
                                    <td>
                                        @Html.DropDownListFor(m => item.selectedRegion, item.RegionsList, item.Region, new { id = "ddlregion" })
                                    </td>
                                    <td>
                                        @Html.DropDownListFor(modelItem => item.Products, item.ProductsList, item.Products, new { id = "ddlproduct" })
                                    </td>
                                    <td>

                                        @Html.DropDownListFor(modelItem => item.Companies, item.CompaniesList, item.Companies, new { id = "ddlcompany" })
                                    </td>
                                    <td>

                                        @Html.DropDownListFor(modelItem => item.UserName, item.UserNamesList, item.UserName, new { id = "ddlusers" })
                                    </td>
                                    <td>

                                        @Html.CheckBoxFor(modelItem => item.Visible, new { id = "chkVisible" })
                                    </td>
                                    <td>                                            
                                        <input type="submit" value="Edit" id="button" />
                                    </td>

                                </tr>

                            }
                        }
</table>

仅对第一行调用此函数。

---

我假设有一个类似于foreach的按钮，它的id被单击。

给按钮一个类而不是id。

$('.button').click(function () {
                *does something*
                });

提交

这将在每次单击带有类的按钮时触发事件

$('.button').click(function () {
                *does something*
                });

要获取所选内容的值，您可以像Taplar编写的那样在上下文中进行操作，也可以选择按钮的父项并进行子项操作：

var parent = $(this).parent().parent();
var product = $(".ddlproduct", parent).val();
var user = $(".ddlusers",  parent).val();

---

不要忘记将这些ID更改为类。

一旦您将ID更改为类，这样它们就不会被限制为唯一的，您可以根据上下文查找相关元素

$('.button').click(function () {
    //get a reference to the row that contains the button that was clicked
    var $contextualRow = $(this).closest('tr');
    var product = $contextualRow.find(".ddlproduct").find("option:selected").text();
    var user = $contextualRow.find(".ddlusers").find("option:selected").text();

    *does something*
});

---

根据web标准，每个页面的ID都应该是唯一的。改为使用类。为什么不使用

class

而不是

id

？类将如何获取下拉列表的值？类只是标识元素的不同方式。元素可以有

id=“something”

和

class=“something”

，并且可以使用javascript选择器查找这两个元素。唯一的区别是ID应该是唯一的，而类不是唯一的。谢谢你指出这一点。是的，我刚刚看到了。很有魅力！