0

您好，我正在开发一个 jQuery 移动应用程序，情况如下

<script>
    function showPanel(info) {

        alert(info.id);
        alert($(info).next()[0].id);

    }
</script>

<div data-role="footer" id="footer_button" onclick="showPanel(this);">

        <h4 style="text-align: center;">Open toolbar</h4>

</div>

<div id="footerhigher1">

    <div id="footerinner1"></div>

</div>

现在，在第一个 div 的代码onclick事件中，我this从中提取第一个 div 的 id，div并通过jQuery的next()方法获取下一个 div 的 ID。现在我还想获取 ID 为footerinner1的孩子的 ID那么我怎样才能获取该 ID 我在单页中有多个组合

更多 显式视图

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
    </head>

    <body>
        <div data-role="page">
            <div data-role="header">
                    <h1>Page Title</h1>

            </div>
            <!-- /header -->
            <div data-role="content">
                <p>Page content goes here.</p>
            </div>
            <!-- /content -->
            <div data-role="footer" id="footer_button1">
                 <h4 style="text-align: center;">Open toolbar</h4>

            </div>
            <!-- ... -->
            <div id="footerhigher1" class="higher">
                <div id="footerinner-1-1" class="inner"></div>
                <div id="footerinner-1-2" class="inner"></div>
            </div>
        </div>
        <!-- /page -->
        <div data-role="page">
            <div data-role="header">
                    <h1>Page Title</h1>

            </div>
            <!-- /header -->
            <div data-role="content">
                <p>Page content goes here.</p>
            </div>
            <!-- /content -->
            <div data-role="footer" id="footer_button2">
                 <h4 style="text-align: center;">Open toolbar</h4>

            </div>
            <!-- ... -->
            <div id="footerhigher2" class="higher">
                <div id="footerinner-2-1" class="inner"></div>
                <div id="footerinner-2-2" class="inner"></div>
            </div>
        </div>
        <!-- /page -->
        <div data-role="page">
            <div data-role="header">
                    <h1>Page Title</h1>

            </div>
            <!-- /header -->
            <div data-role="content">
                <p>Page content goes here.</p>
            </div>
            <!-- /content -->
            <div data-role="footer" id="footer_button3">
                 <h4 style="text-align: center;">Open toolbar</h4>

            </div>
            <!-- ... -->
            <div id="footerhigher3" class="higher">
                <div id="footerinner-3-1" class="inner"></div>
            </div>
    </body>

</html>
4

3 回答 3

0

您问如何使用 jquery 样式的事件处理来做到这一点：

$('#footer_button').on('click', function() {
    var $this = $(this);
    alert($this.attr('id');
    // traversing the dom etc.
});

还更新了html：

<div data-role="footer" id="footer_button">
    <h4 style="text-align: center;">Open toolbar</h4>
</div>
<!-- ... -->
<div id="footerhigher1" class="higher">
    <div id="footerinner1" class="inner"></div>
</div>
于 2013-03-13T10:37:34.217 回答
0

愿这项工作：

alert($(info).next().children().eq[0].id);
于 2013-03-13T10:25:05.140 回答
0

尝试这个

 alert($(info).next().children('div').attr('id'));
于 2013-03-13T10:25:44.263 回答