jqueryajax加载url的片段，该片段由一个变量定义

相对较新的jQuery用户（在过程中使用了它，但现在确实在尝试理解它）

我正在尝试使用ajax创建自己的jQuery分页，到目前为止，我的代码如下所示：

$(document).ready(function(){
    $('.pigs ul.pigspagination li a').live('click', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        if(url.match('^http')){
            return true;
        } else {
            var element = $(this).closest(".pigs");
            $(element).append('<div id="loading"><img alt="Loading..." src="loading.gif" /></div>');
            $('#loading').fadeIn('normal');
            $(element).load(url + ' ' + element);
            return false;
        }
    });
});

我假设我正在加载url，然后添加一个空格，然后为引用自的元素添加空格 var元素=$（this）.closest（“.pigs”）

如果你想知道为什么我不能 $（元素）.load（url+'.pigs'）

这是因为我多次引用.pigs，而且它是自动的，因为它是我编写的php库脚本

html大致如下所示：

<div class="pigs">
    <ul class="pigs-gallery">
        <li><a href="the link" target="_blank"></a></li>
        ...
    </ul>
    <ul class="pigspagination">
        <li><a href="pagination link">&lt; Prev</a></li>
        ...
        <li><a href="pagination link">Next &gt;</a></li>
    </ul>
</div>

它只加载吸力，但删除了所有代码，我猜frag的传递很糟糕。.attr（'id'）；将自己获取id，而不是“#”对吗

如果有人感兴趣，请输入最终代码：

$(document).ready(function(){
    $('.pigs ul.pigspagination li a').live('click', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        if(url.match('^http')){
            return true;
        } else {
            var element = $(this).closest(".pigs");
            $(element).append('<div id="loading"><img alt="Loading..." src="loading.gif" /></div>');
            $('#loading').fadeIn('normal');
            var frag = $(this).closest(".pigs").attr('id');
            $(element).load(url + ' #' + frag);
            return false;
        }
    });
});

$（文档）.ready（函数（）{
$（'.pigs ul.pigspagination li a'）.live（'click'，函数（e）{
e、 预防默认值（）；
var url=$（this.attr（'href'）；
if（url.match（“^http”））{
返回true；
}否则{
var元素=$（this）.closest（“.pigs”）；
$（元素）。追加（“”）；
$（'加载'）.fadeIn（'正常'）；
var frag=$（this）.closest（“.pigs”）.attr（'id'）；
$（元素）.load（url+'#'+frag）；
返回false；
}
});
});

在我们讨论了这些评论之后，我想我明白你想要什么了

您的示例URL

index.php？pigsgallery=1&pigspage=1

看起来不错。我想它只会返回Y页上pigsgallery X的内容。完美

因此，您的问题似乎是将URL返回的内容插入右侧库

div

——其中包含已单击的分页链接。你就快到了。正如我在其中一条评论中所建议的，

$（element）.load（url）

应该是word。它的意思是“加载url，并用响应替换

$（元素）

的内容”

您的HTML应该如下所示（两个库当前都在第2页上）：

...



...




...



...

---

如果您的HTML不是这样的，那么您可能会混淆在PHP中应该做什么以及什么需要jQuery。PHP应该处理请求并返回您需要在其中一个div上替换的内容。然后，应该使用jQuery将该内容实际插入到页面的右侧元素中（您已经使用

var-element=$（this.closest（“.pigs”）插入了该元素）

指向

$的第一个参数。load

必须是一个有效的URL。我不明白您试图做什么。在将ajax调用返回的HTML插入

$（元素）

之前，是否需要过滤它？@bfavaretto$（元素）正在选择单击链接的父项，即.pigs。因此，在链接的单击中，找到最接近的.pigs，即父项。希望这有一定意义。url是单击链接的链接。我知道这是有效的，因为我以前使用过它。您的url会给出下一页的结果，对吗？您尝试过简单地使用

$（元素）吗.load（url）

？@bfavaretto我需要该页面的片段，因为我在同一类的每个页面上都有多个图库，所以我希望使用$（这个）我可以用一些方法欺骗它，使它只给我$（这个）链接的父级。我只是想做一些jquery做不到的事情吗？嘿，等等，我注意到了另一件事：你的分页链接上有

分页链接

作为href。这些都是无效的url，不能用于ajax调用，例如

$。load

。那么，你有返回图库下一页的有效url吗？它在哪里现在看看我们的困惑吧，一个页面上有多个库，并且？pigsgallery=只告诉脚本分页是否是正确的库。这可能会有帮助。这就是为什么我需要告诉jQuery只从页面获取此链接父级。我知道，我试图避免向我的php添加更多代码，使其尽可能动态，但我猜我做不到。需要添加一个id。就在最后一件事上。用户可以选择为库添加一个自定义id，但是我将从文件夹名称中获得一个默认id生成器。这样就可以了。所以我可以使用类似var element=$（this.attr（'id'）的东西吗；要获取jquery的id？-----编辑------编辑了我的第一篇文章以添加更多代码。是的，但请记住，HTML id属性中不能包含任何内容（请参见）我很愚蠢，我告诉jquery获取$（此），但它不知道我试图获取的是什么！所以$（此）。最近的（“.pigs”）会有用的！非常感谢。这不完全是我想要做的，但我现在确实了解jQuery如何更好地工作了。+1

var frag = $(this).closest(".pigs").attr('id');
$(element).load(url + ' #' + frag);

$(document).ready(function(){
    $('.pigs ul.pigspagination li a').live('click', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        if(url.match('^http')){
            return true;
        } else {
            var element = $(this).closest(".pigs");
            $(element).append('<div id="loading"><img alt="Loading..." src="loading.gif" /></div>');
            $('#loading').fadeIn('normal');
            var frag = $(this).closest(".pigs").attr('id');
            $(element).load(url + ' #' + frag);
            return false;
        }
    });
});

<div class="pigs" id="pigs1">
    <ul class="pigs-gallery">
        <li><a href="the link" target="_blank"></a></li>
        ...
    </ul>
    <ul class="pigspagination">
        <li><a href="index.php?pigsgallery=1&pigspage=1">&lt; Prev</a></li>
        ...
        <li><a href="index.php?pigsgallery=1&pigspage=3">Next &gt;</a></li>
    </ul>
</div>

<div class="pigs" id="pigs2">
    <ul class="pigs-gallery">
        <li><a href="the link" target="_blank"></a></li>
        ...
    </ul>
    <ul class="pigspagination">
        <li><a href="index.php?pigsgallery=2&pigspage=1">&lt; Prev</a></li>
        ...
        <li><a href="index.php?pigsgallery=2&pigspage=3">Next &gt;</a></li>
    </ul>
</div>