如何在 jquery 中获取动态 Span id？

Question

我在 asp.net 中使用 jquery

我有一个用户控件，其中有 div，在 div 表中，在表 tr 中，在 tr td 中，在 td 中我有标签。

ASCX：

          <div  ID="Container" runat="server" class="dvContainer">
<table ID="Table" class = "Tablecs">
    <thead><tr>
        <td colspan="2">
            <asp:Label ID="lbl1" Text="Swiss" runat="server" /></td>
    </tr>
        </thead>
    <tr>
        <td>ABC</td>
        <td>DEF</td>
    </tr>
    <tr>
        <td><asp:Label ID="lblPA" Text="SUN 12/21 05:04" runat="server" /></td>
        <td ><asp:Label ID="lblPD" Text="SUN 12/21 19:00" runat="server" /></td>
    </tr>
        <tr>
        <td><asp:Label ID="lblAA" Text="SUN 12/21 05:04" runat="server" /></td>
        <td ><asp:Label ID="lblAD" Text="SUN 12/21 19:00" runat="server" /></td>
    </tr>
</table>     

我想将数据动态绑定到这些用户控件。即，将数据绑定到用户控件中的标签。

我的 Jquery

            $div.find(".Table").text(oPorts[iCount].Name); // my result is an array of oPorts and i have filed as Name

但这不能正常工作。 当我动态检查代码时，它会为每个标签生成 SPAN 如何在循环中动态查找 SPAN id 并将数据绑定到标签？？

感谢任何帮助。提前致谢。

Answer 1

假设您有一个带有如下标记的用户控件

<%@ Control Language="C#" AutoEventWireup="true" 
 CodeBehind="WebUserControl1.ascx.cs" Inherits="DOTNET_FORMS.WebUserControl1" %>

<div id="Container" runat="server" class="dvContainer">
    <table id="Table" class="Tablecs">
        <tr>
            <td>
                <asp:Label ID="lblPA" Text="SUN 12/21 05:04" runat="server" />
            </td>
            <td>
                <asp:Label ID="lblPD" Text="SUN 12/21 19:00" runat="server" />
            </td>
        </tr>
    </table>
</div>

并且您已经在您的.aspx 页面上注册了这个用户控件，如下所示：

<%@ Register TagPrefix="UC" TagName="Test" Src="~/WebUserControl1.ascx" %>

并像这样使用它：

<UC:Test ID="uc1" runat="server" />

然后，当您运行页面时，您的元素会呈现类似

<div id="uc1_Container" class="dvContainer">
    <table id="Table" class="Tablecs">
        <tr>
            <td>
                <span id="uc1_lblPA">SUN 12/21 05:04</span>
            </td>
            <td>
                <span id="uc1_lblPD">SUN 12/21 19:00</span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="uc1_lblAA">SUN 12/21 05:04</span>
            </td>
            <td>
                <span id="uc1_lblAD">SUN 12/21 19:00</span>
            </td>
        </tr>
    </table>
</div>

查看您的标签和其他元素（具有 runat="server" 属性的元素）的 id 是如何改变的，即

lblPA > uc1_lblPA
lblPD > uc1_lblPD

Container > uc1_Container

所以，你必须注意这些变化，因为只有这样你才能使用 jQuery 获取这些元素，因为 jQuery 是一种客户端语言，它会在服务器端代码 (runat="server") 执行后执行.

但是，如果您不想查看修改后的 id，您可以执行以下操作

1. 删除runat="server" 属性，并确保您的ID 是唯一的，所有这些
2. 让runat="server" 属性成为他们的属性，在所有服务器端控件上放置一个属性clientidmode="static"。并且 ID 不会改变。
3. 使用 ClientId，即在你的 jQuery 选择器中，抓取一个像这样的元素：$('#"+'<%= lblPA.ClientID %>');

现在，由于你的ID是唯一的，你不需要找，直接抓取这样的元素：

$('#lblPA').text();

或者，如果您想使用 Tablecs 类遍历表的所有 td，请执行以下操作：

$('.Tablecs tr td').each(function(index, item){
             alert($(item).text());
});