Question

我正在尝试使用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]时）如下：

显示点击的网址链接（这样我就可以向网址提交AJAX POST）
显示容器的ID（因此我可以将收到的数据推回到该ID）

任何人都可以帮忙了解如何获取父容器ID和点击的网址吗？

[[编辑]]

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

Answer 1

$('.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);
});

Answer 2

尝试：

$(document).ready(function() {
    $('a').click(function(){
        alert('url:' + $(this).attr('href') + ', parent: ' + $(this).parent().attr('id'));
        return false;
    });
});

这是jsfiddle： http://jsfiddle.net/zaPhe/3/

Answer 3

<强>示例
http://jsfiddle.net/

$('.container a').live('click',function() {
    var id = $(this).parent('.container').attr('id');
    alert( $(this).attr('href') + ' for ' + id );
});

Answer 4

试试这个

jQuery(document).ready(function() {
    $("a").click(function() {
        $this = $(this);
        parendtID = $this.closest("div").attr("id");
        thisHref = $this.attr("href");
        alert(parentID + thisHref);
    });
});

jQuery：如何确定父容器元素id

4 个答案: