jQuery - 在点击时将新UL内容添加到现有UL

时间:2010-08-26 12:43:28

标签: jquery

我正在使用此处详述的插件:

http://www.thatagency.com/design-studio-blog/2009/01/refreshing-an-element-at-a-set-time-interval-using-jquery-and-a-sprinkle-of-ajax/

这是我的jQuery:

$(document).ready(function(){
   var j = jQuery.noConflict();
    j(document).ready(function()
    {
        j(".refreshMe").everyTime(5000,function(i){
            j.ajax({
              url: "test.php?latest="+className+"",
              cache: false,
              success: function(html){
                j(".refreshMe").html(html);
              }
            })
        })
    });
});

*注意className是一个计算值,它是一个UNIX日期,该日期在页面上的第一个元素上设置为从数据库中提取的日期和时间。这用于在新内容到达数据库时计算出来。它与我所遇到的问题无关,但我认为无论如何都会让你满意。

这允许我请求一个php文件从数据库中获取新内容并将其添加到页面而无需刷新。

我的页面如下:

<ul class="entries">
 <li>Item1</li>
 <li>Item2</li>
 <li>Item3</li>
 <li>Item4</li>
 <li>Item5</li>
 <li>Item6</li>
</ul>

当我获取新内容时,我在新DIV中将HTML添加到页面中,但新内容的结构是上面列表中的lase。

因此,当找到新内容时,页面如下所示:

<ul>
 <li>Item1</li>
 <li>Item2</li>
 <li>Item3</li>
</ul>

<ul class="entries">
 <li>Item1</li>
 <li>Item2</li>
 <li>Item3</li>
 <li>Item4</li>
 <li>Item5</li>
 <li>Item6</li>
</ul>

我已将最新结果包装在隐藏的DIV中。

E.g。

<div class="latest" style="display: none;">
    <ul>
     <li>Item1</li>
     <li>Item2</li>
     <li>Item3</li>
    </ul>
</div>

我想要做的是在页面上设置append链接或按钮时,将我的jQuery更改为clicking隐藏内容到现有列表。

类似于Facebook让您知道的方式,有新的更新可见,并允许您点击链接查看它们。

1 个答案:

答案 0 :(得分:0)

这应该可以解决问题:

$('.entries').prepend($('.latest ul').html());

基本上,您希望从ul内的latest获取innerHTML,并将其放在entries的开头。