我正在尝试使用jQuery获取单击其href元素的容器的ID。我知道这涉及使用parent()方法,但是我不确定如何将它们放在一起。

这是我将要处理的HTML文档的摘要:

<html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <div id="cntnr_1" class="container">
             <a href="/foo1">foo1</a>
             <a href="/foo2">foo2</a>
             <a href="/foo3">foo3</a>
        </div>
        <div id="cntnr_2" class="container">
             <a href="/foobar1">foobar1</a>
             <a href="/foobar2">foobar2</a>
             <a href="/foobar3">foobar3</a>
        </div>
        <script type="text/javascript">
        $().ready(function(){
            //display the url of the clicked on link
            //display the id of the container whose href was clicked on
        });
        </script>
    </body>
</html>


所需的行为(当单击“容器”中的链接[href]时)如下:


显示单击的URL的链接(以便我可以向该URL提交AJAX POST)
显示容器的ID(以便我可以将接收到的数据推回该ID)


谁能帮助您获取父容器ID和被点击的网址?

[[编辑]]

我已经在这里发布了我正在使用的实际HTML代码:http://jsfiddle.net/fpPRL/

最佳答案

$('.container a').click(function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    var container_id = $(this).parent().attr('id');
    alert('the url is "'+ url +'" from the container #' + id);
});


更新:
由于您是在其他html标记上尝试过的(并且无法正常工作),因此这里提供了一种更通用的解决方案(请在此处查看实际操作:http://jsfiddle.net/fpPRL/1/):

$('.container a').click(function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    var container_id = $(this).parents('.page_container:first').attr('id');
    alert('the url is "'+ url +'" from the container #' + id);
});

10-05 20:43
查看更多