Question

我在datalist中有几个嵌套表，如

<asp:DataList ID="dlList" runat="server" Width="50%"
        onitemdatabound="dlList_ItemDataBound">
        <ItemTemplate>
            <table border="0px" id="tblOuter" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <table id="tblInner" border="0px" cellpadding="0" cellspacing="0">
                            <tr class="AccordionPanelTab">
                                <td class="QSHeader"><asp:Label ID="lblHead" runat="server"  Text='<%# Eval("QA") %>'></asp:Label></td>
                                <td align="right"><asp:Image ID="toggleImg" CssClass="ToggleImageStyle" runat="server" ImageUrl="Images/up-arrow.png" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr >
                    <td class="AccordionPanelContent"><div  id="content" runat="server" style="padding-left : 10px"></div></td>

                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList>

因此我在点击具有名为“AccordionPanelTab”的类的tr时尝试访问元素。

我写了一个jquery来访问像<div id="content">

这样的元素

<asp:Image ID="toggleImg" CssClass="ToggleImageStyle" runat="server" ImageUrl="Images/up-arrow.png" /> when user click on tr having class called "AccordionPanelTab".

我的jquery是

这不是我真正的jquery。在这里，我正在做几个试验＆amp;访问元素的错误。

jQuery(document).ready(function () {
        $("tr.AccordionPanelTab").click(function () {
            alert($(this).parent().parent().attr("id"));
            alert($(this).parent().parent().closest("table").attr("id"));

        });
     })

但我无法这样做........任何人都可以提供帮助。感谢

Answer 1

试试这个。

$(document).ready(function () {
    $("tr.AccordionPanelTab").live('click', function () {
        var imageID = $(this).find("img.ToggleImageStyle").attr("id");
        var contentID = $(this).closest("table").parent().parent().next().find("td.AccordionPanelContent div").attr("id");
        //alert("Image ID: " + imageID);
        //alert("Content ID: " + contentID);
    });
});

在不相关的附注中，请不要在数据呈现控件中使用id="tblOuter"和id="tblInner"，因为它会生成无效的HTML。 ID应仅在HTML文档中使用一次。使用runat="server"或将其更改为class

Answer 2

jQuery(document).ready(function () {
        $("tr.AccordionPanelTab").click(function () {

            alert($(this).closest("table").attr("id"));

        });
     });

jquery closest

Answer 3

访问tblInner和tblOuter表：

var oDirectParent = $(this).parents("table");
var oGrandParentTable = oDirectParent.parents("table");

.parent()方法返回直接父节点，对于<tr>，这将是<tbody>。

Answer 4

您只想按 id 查找元素？那么在哪里并不重要; JavaScript可以通过它的id属性来获取元素。

$('tr.AccordionPanelTab').click(function(){
    var content = $('#content');
    var toggleImg = $('#toggleImg');
});

现在让我们希望您的id在页面中是唯一的。如果不是，你需要解决这个问题，我需要提供一个新的解决方案。

面对通过jquery访问嵌套元素的问题

4 个答案: