Ajax在具有相同id / class的多个div中加载内容

时间:2014-02-19 16:08:28

标签: php jquery ajax rss swiper

我正在尝试将RSS Feed加载到滑块中。滑块处于循环模式,因此在此模式下,您将获得无限滚动,并且第一个幻灯片将在最后一个之后重复。所以我的RSS幻灯片实际上有两张幻灯片。

现在的问题是,如果只有一个div,则只加载内容。

我的jQuery加载rss文件:

        (function($)
{
    $(document).ready(function()
    {
        $.ajaxSetup(
        {
            cache: false,
            beforeSend: function() {
                $('#rssblok').show();
                $('#loading').show();
            },
            complete: function() {
                $('#loading').hide();
                $('#rssblok').show();
            },
            success: function() {
                $('#loading').hide();
                $('#rssblok').show();
            }
        });
        var $container = $("#rssblok");
        $container.load("/kantivi/kantivi_rss.php");
        var refreshId = setInterval(function()
        {
            $container.load('/kantivi/kantivi_rss.php');
        }, 9000);
    });
})(jQuery);

kantivi_rss.php文件只是一个RSS加载器,它回显了内容。一切正常

现在,必须在滑块内容中加载Feed的部分如下所示:

<?php 
$slider .= '<div id="rssblok">';
                                            $slider .= '<img src="/img/loading.GIF" id="loading" alt="loading" style="display:none;" />';
                                            $slider .= '</div>';
?>

如果我将滑块放在一个循环中,则只有一个

<div id="rssblok">

它很有效。但是在循环模式下,它不会加载RSS内容,因为有2个幻灯片中包含<div id="rssblok"> div。

希望问题很清楚,如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

您需要遍历所有容器并将负载应用于每个容器:

var $containers = $("#rssblok");
for (var i=0, j=$containers.length; i<j; i++){
    var $container = $($containers[i]);
    $container.load("/kantivi/kantivi_rss.php");
    var refreshId = setInterval(function(){
        $container.load('/kantivi/kantivi_rss.php');
    }, 9000);
}