1

Tengo un admin que agrega noticias dinamicamente a una pagina. Tengo dos clases diferentes diferentes que le da estilos distintos a las noticias. Desde el admin no puedo agregar esas clases. Como hago con javascript para que cuando el do que tengo armado las cargue desde mi admin le agregue por ejemplo a la noticia uno una clase y a la dos y tres otra y a la cuatro la misma que la uno?

Por ejemplo que quede asi

<div class="clase-1">
    <h2>Titulo</h2>
    <p>Bajada</p>
</div>

<div class="clase-2">
    <h2>Titulo</h2>
    <p>Bajada</p>
</div>

<div class="clase-2">
    <h2>Titulo</h2>
    <p>Bajada</p>
</div>

<div class="clase-1">
    <h2>Titulo</h2>
    <p>Bajada</p>
</div>

Los divs estan en un contenedor, y se que clases ponerle porque las tengo predefinidas. Lo que me importa es que la el primer div de noticias y el 4 tengan la misma clase.

5
  • Disculpa, que quiere decir esto, que cuando el do? el 20 abr. 2017 a las 4:09
  • intenta probar con algunos tag html. Ejemplo, en tu admin cuando escribas la noticia colocar el titulo así <h1>titulo</h1> y ve como queda la noticia.
    – fwBasic
    el 20 abr. 2017 a las 4:13
  • Aqui te dejo una pregunta que hizo alguien mas, esta respondida y seguro te servira, agregar css uando javascript el 20 abr. 2017 a las 4:15
  • Esos divs que nos muestras de noticias están contenidos en algún contenedor exclusivo para ellas?
    – frikinside
    el 20 abr. 2017 a las 6:46
  • 1
    @Jonatan edité tu pregunta con lo que habías publicado como respuesta. Por favor consideralo para futuras aclaraciones.
    – Mariano
    el 20 abr. 2017 a las 14:19

2 respuestas 2

1

En el caso particular de agregar un elemento u otro, se puede hacer un bucle (loop) con una condición de si el iterador cumple con la condición, agregar una clase, en caso contrario agregar la otra. Ejemplo:

/**
 * Actualiza la sección de noticias, al elemento non se le asigna
 * clase-1 y al elemento par se le asigna clase-2.
 *
 */
function cargarNoticias(){
  //Inicializar variables
  var noticias = '';
  var limite = 4; // Para efectos del ejemplo seleccionado arbitrariamente.
  var clase = '';
  for (var i = 1; i <= limite; i++){
    // Si el iterador es uno o un múltiplo de 4, asigna una clase, en caso contrario la otra
    clase = (i == 1 || i%4 == 0) ? '"clase-1"' : '"clase-2"';
    //Cadena de noticias en formato HTML
    noticias += 
    '<div class=' + clase + '>\n' +
    '   <h2>Titulo</h2>\n'+
    '   <p>Bajada</p>\n'+
    '</div>'
  }
  //Actualizar la sección noticias
  document.getElementById('noticias').innerHTML = noticias;
}
.clase-1 {
 color:red
 }
<input type="button" value="Cargar noticias" onclick="cargarNoticias()" >
<br/>
<div id="noticias">Sin noticias<div>

0

¿Los divs están en un contenedor ? ¿como sabes que clase añadir a cada div? Yo creo que necesitas traerte del admin(por ejemplo con ajax) las clases que le vas a dar a cada noticia, así podrás recorrer los divs y añadirles la clase apropiada.

Supongamos que tienes un array con las clases de cada noticia y tienes 4 noticias:

clasesNoticias=[
"clase-1",
"clase-2",
"clase-2",
"clase-1"
];

Ahora imaginemos que tienes un contenedor de noticias con las 4 noticias a las que quieres añadir la clase:

<div id="contenedorNoticias">
<div>
    <h2>Titulo</h2>
    <p>Bajada</p>
</div>

<div>
    <h2>Titulo</h2>
    <p>Bajada</p>
</div>

<div>
    <h2>Titulo</h2>
    <p>Bajada</p>
</div>

<div>
    <h2>Titulo</h2>
    <p>Bajada</p>
</div>
</div>

con estos datos, puedes recorrer los divs del contenedor de noticias y mirando en el array la case de cada noticia añadirle la clase al div.

let claseNoticia;
$( "#contenedorNoticias div" ).each(function( index ) { 

        claseNoticia = clasesNoticias[index];
        $( this ).addClass( claseNoticia ); 
});

Un saludo

8
  • Esto tiene múltiples problemas de ejecución. Sólo aporta una solución en el caso de ejemplo que nos ha proporcionado pero falla estrepitosamente si hay 5 divs por ejemplo. Por no mencionar de que no todos los divs que vaya a haber en el HTML van a ser de noticias. Considero que hay aclaraciones que realizar antes de aventurarse a responder!
    – frikinside
    el 20 abr. 2017 a las 8:08
  • No puedo imaginarme su programa, con esa información que nos da es la solución para ese ejemplo. si quiere algo mas genérico que proporciona mas información. Saludos!
    – ioniJS
    el 20 abr. 2017 a las 8:12
  • Aunque tienes razón en que efectivamente no puedes imaginarte su programa, disponemos de comentarios para solicitar más información si se considera necesario. Nuestro objetivo aquí es ayudar y proporcionar una solución a un problema. No obstante, igual es sólo percepción mía. Sería posible que para evitar confusiones añadieses unos comentarios en la respuesta para aclarar el alcance y contexto de la solución? De este modo evitamos confusiones al OP y a futuros usuarios que consulten esta pregunta.
    – frikinside
    el 20 abr. 2017 a las 8:29
  • 1
    De acuerdo, puede que tengas razón, la verdad lo hice con buena intención al leer su pregunta yo creo que esta bastante clara, quiere añadir unas clases a una serie de divs, pero no dice nada mas por eso e pensado que el contexto no le importa y he ido a la practica, lo siento.
    – ioniJS
    el 20 abr. 2017 a las 8:45
  • He editado mi respuesta, no puedo hacerle comentarios hasta que no tenga 50 puntos, por eso le he respondido, un saludo.
    – ioniJS
    el 20 abr. 2017 a las 8:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.