Comunidad de diseño web y desarrollo en internet online

Jquery : recorrer multiple divs

Citar            
MensajeEscrito el 20 Mar 2008 03:18 pm
Estimados usuarios de CristaLab

Tengo el siguiente problema :
Poseeo un archivo asp en el cual se muetran las 5 ultimas noticias publicadas , estas van contenidas en una capa div [div_news] que es repite por cada noticia o sa 5 veces con el mismo nombre

Código :

<%
Set news = Server.CreateObject ("ADODB.Recordset")
SQL = "SELECT  top 5 * FROM noticias ORDER BY id_news DESC" 
news.open SQL,conexion
do while not news.eof %>
<div id="div_news">   
       <table width="450">   
          <tr>
            <td height="20" colspan="2"><%=day(news("fecha"))&"."&month(news("fecha"))&"."&year(news("fecha"))&"  - "& news("titular")%>          </td>
          </tr>
         <tr  class="texto12">
           <td width="45"> <a href="news_detalle.asp?id_news=<%=(news("id_news"))%>"><img border="0" src="<%="http://www.wapmania.cl/cnb/img/"&(news("imagen"))%>" width="50" height="50" /></a></td>
           <td width="341" valign="top"class="text3" > <a href="news_detalle.asp?id_news=<%=(news("id_news"))%>"><%= left((news("contenido")),200)&"..."%></a></td>
                 </tr>
     <tr><td align="center" colspan="2"><img src="http://www.wapmania.cl/cnb/img/div.gif"></td></tr>
  </table>
  </div>
<% news.MoveNext
  loop %>


la idea es poder obtener el primer id='div_news' y mostrarlo como la ultima notica y, luego con
next la instruccion next pasar a la noticia siguiente o prev volver a la anterior

he estado leyendo documentacion pero no he podido dar con la solucion....
espero su omprencion y pronta ayuda,... gracias de antemano...

Por chripanob

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 22 Mar 2008 05:42 pm
No uses múltiples elementos con el mismo identificador, es mala práctica y te dará muchos problemas.

Otra cosa, no uses nombres como div_news, es redundante poner "div_" como prefijo.

Ahora, lo que necesitas hacer es darle una clase a esas cinco capas, en este ejemplo será "noticias". Todas deberán ser escondidas al cargar la página. Con jQuery haces $('.noticias') y lo asignas a una variable, esa función te regresará un array con todas ellas. Asigna el número 0 a una variable nueva, los enlaces irán cambiando ese valor, el cual será usado para llamar cada elemento del array. Explico más sencillamente con código.

Código :

var noticiaActual = 0;
$('.noticias').hide();
$('.noticias')[noticiaActual].show();

$('#linkAtras').click(function() {
noticiaActual = (noticiaActual > 0) ? (noticiaActual - 1) : 0;
$('.noticias').hide();
$('.noticias')[noticiaActual].show();
});

$('#linkAdelante').click(function() {
noticiaActual = (noticiaActual < 5) ? (noticiaActual + 1) : 5;
$('.noticias').hide();
$('.noticias')[noticiaActual].show();
});

No lo he probado, es sólo para mostrar el concepto. Suerte.[/code]

Por Alan

470 de clabLevel

2 tutoriales

 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.