динамически загружать новые данные в DIV и скрыть старые данные

Question

У меня есть Div где Последние новости выборка из базы данных с PHP во время цикла обнаружились как->

Здравствуйте Новости 1

Здравствуйте новости 2

Здравствуйте новости 3

Новости обновляются каждые 10000 миллисекунд

Вот HTML часть PHP While Loop начинается здесь

<div class="media"> 
<div class="media-object pull-left has-notif"> 
<i class="fa fa-flash"></i> 
</div> 
<div class="media-body"> 
<span class="media-heading"><?php echo $fot['message']; ?></span> 
<span class="media-meta time"><?php echo timeAgo($fot['time']); ?></span> 
    </div> 
    </div> 

Loops заканчиваются. Вот что я tried->

<script type="text/javascript"> 
var auto_refresh = setInterval(
function() 
{ 
$('#news').load('record_count.php').fadeIn("slow"); 
}, 10000); // refresh every 10000 milliseconds 

<div id="news"> </div> 

Теперь проблема я облицовочная, что она обновляет весь DIV, если новые новости встречается, чем новости № 3 должны исчезнуть & новые новости приходят в верхней , если еще одна новость найдена новость 2 должна исчезнуть для eg->

Аякса запрос нашел одну новость пост, так что будет отображаться здесь

Здравствуйте Новости 2 // Hello новости 1 должен прийти выше этого новости 2

Здравствуйте новости 3

Здравствуйте новости 4 // Новости 4 должны исчезнуть с экрана

Answer 1

Вы можете использовать что-то вроде этого

<div> 
<ul> 
    <li>zero</li> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
</ul> 
</div> 

<script type="text/javascript"> 
var auto_refresh = setInterval(
function() 
{ 
$('#news').prepend('record_count.php').fadeIn("slow"); 
}, 10000); // refresh every 10000 milliseconds 
var maxAllowed = 3; 
$('li:gt(' + (maxAllowed-1) + ')').remove();} 
</script> 

Она будет автоматически удалять элементы из нижней части, когда один добавляется сверху, используя prepend(). Посмотрите на это ТАК thread

Answer 2

1. Создайте контейнер для хранения ваших новостей:

   <div class="news_container"></div>

2. Создать шаблон для отдельных элементов новостей: Было бы хорошая идея использовать что-то вроде Mustache.js

   <div class="news_item"> <h1 class="news_title"></h1> <p class="news_content"></p> </div>

3. Получить record_count.php отправить вас обратно новостей в массиве, как это:

   $news = [ 'news_1_title' => 'Some news content here', 'news_2_title' => 'Some more content here', ];

4. Loop через массив, как только вы их клонировать шаблон и заполнить поля с помощью классов, чтобы найти часть, которую вы хотите заполнить (или с помощью пакета шаблонов вы используете), затем .prepend() его к вашему .news-container

5. использование .last() найти последний элемент новостей в контейнере и исчезают его (а затем .remove(), чтобы удалить его полностью)