Como puedo modificar este script para que limitar elementos en la pagina

chroman81 · #1 (**permalink**) 03/01/2010, 18:42

Hola, estoy elaborando un sitio, donde se actualiza constantemente un RSS, se añaden cada 30 segundos 2 o 3 elementos nuevos con JQuery, pero cada vez que avanza el tiempo se hace la pagina demasiado grande, lo que quiero hacer es limitar elementos por ejemplo a 15 y si se añaden 2 elementos, se borren los últimos osea 14 y 15.

Este es mi codigo .JS:

Código:

function loadSearch()
{
	//show message when the feed is loading
	$("#update-alert").text("Loading new results...");

	//ajax request to get the results from search.php
	$.ajax({
			url : "search.php",
			success : function(results){

			//counter to count new results
			var counter = 0;

			//find each 'div' with class 'result'  from the response and loop through them
			$(results).find("div.result").each(function(i){

				//get the id of the div
				var div_id = $(this).attr("id");

				//check if any div with the same id already exists
				if( $("#twitter-update div#" + div_id).length == 0 )
				{
					//if doesn't exist then prepend this div
					$("#twitter-update").prepend(this);
					
					
					//increase the counter
					counter++;
				}
			});

			//show the number of new results
			if(counter == 0)
				$("#update-alert").text("no new result");
			else if(counter == 1)
				$("#update-alert").text("1 new result");
			else
				$("#update-alert").text(counter + " new results");
   		}
	});	
}

$(document).ready(function(){
	loadSearch();
	setInterval("loadSearch()",30000);
});

He escuchado que con la funcion .remove(); pero estoy demasiado verde en jquery.

Alguna idea, como podría hacerlo?

Saludos gracias por adelantado.

Dany_s · #2 (**permalink**) 04/01/2010, 05:35

antes de añadir selecciona el ultimo elemento, algo como esto

Código HTML:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        var i = 6;
        function loadSearch()
        {
            $('#contenedor div:last').hide('slow', function () {
                $(this).remove();
            });
            $('#contenedor').prepend("<div>nota "+(i++)+"</div>");
        }

        $(document).ready(function(){
            setInterval("loadSearch()",1000);
        });
    </script>
<style>
    div>div{height:20px; width:100px; background-color:red; margin:5px}
</style>
</head>
<body>
    <div id="contenedor">
        <div>nota 5</div>
        <div>nota 4</div>
        <div>nota 3</div>
        <div>nota 2</div>
        <div>nota 1</div>
    </div>
</body>
</html>

primero busco el ultimo div, lo oculto y lo borro, luego agrego un div al principio

chroman81 · #3 (**permalink**) 04/01/2010, 23:13

Muchísimas gracias ya me ha quedado bastante claro, lo pondré en practica :D, saludos y gracias