开发者

jQuery - append new UL content to existing UL on click

开发者 https://www.devze.com 2023-01-13 00:06 出处:网络
Im using the plugin detailed here: http://www.thatagency.com/design-studio-blog/2009/01/refreshing-an-element-at-a-set-time-interval-using-jquery-and-a-sprinkle-of-ajax/

Im using the plugin detailed here:

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

Here is my 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);
              }
            })
        })
    });
});

*Note className is a calculated value which is a UNIX date, this date is set on the first element on the page as the date and time it was fetched from the database. This is used to work out when new content arrives in the database. Its not really relevant to the problem i have but thought i'd fill you in anyway.

This is allowing me to request a php file to get new content from a database and add it to the page without the need for refresh.

My page looks like this:

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

When I fetch the new content I add the HTML to the page in a new DIV, but the structure of the new content is the lase to the list above.

So when new content is found the page looks like this:

<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>

I've wrapped the latest results in a hidden DIV.

E.g.

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

What I would like to do is alter my jQuery to append the hidden content to the existing list when clicking a link or button set on the page.

Similar to the way Facebook lets you know there are new updates to been seen, and lets you click a link to view them.


This should do the trick:

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

Basically you want to get the innerHTML from the ul inside of latest and put it at the beginning of entries.

0

精彩评论

暂无评论...
验证码 换一张
取 消