Add different classes to a DIV list

Question

Add different classes to a DIV list

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have an admin that dynamically adds news to a page. I have two different different classes that gives different styles to the news. From the admin I can not add those classes. How do I do with javascript so that when the do that I have armed load them from my admin I add for example to the news one a class and two and three others and four the same as the one?

For example, look like this

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

The divs are in a container, and I know what classes to put because I have predefined them. What matters to me is that the first news div and 4 have the same class.

javascript

asked by Jonatan Ezequiel Caudo 20.04.2017 в 05:55

source

2 answers

OnClick in Fragment does not change my TextView [duplicated] Oracle PL / SQL Get package name

score 1 · Answer 1

In the particular case of adding one element or another, a loop can be made with a condition of whether the iterator meets the condition, add a class, otherwise add the other. Example:

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

score 0 · Answer 2

Are the divs in a container? How do you know what class to add to each div? I think you need to bring from the admin (for example with ajax) the classes that you will give to each news, so you can go through the divs and add the appropriate class.

Suppose you have an array with the classes of each news item and you have 4 news:

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

Now imagine that you have a news container with the 4 news to which you want to add the class:

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

With this data, you can go through the divs of the news container and look in the array the case of each news add the class to the div.

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

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

Greetings