Cómo agregar una clase a una variable agregada que ya está llamando a un contenedor div en jQuery

Question

Estoy usando una búsqueda xml para recorrer una base de datos de citas para verlas en una página html:

if (results !=null && results.value !=null {
  for (var i = 0; i < result.value.length; i++) {
    time = results.value[i].starttime;
    place = results.value[i].location;
    who = results.value[i].attendee;

    $("#homediv").append(time);
    $("#homediv").append(place);
    $("#homediv").append(who);
  }
}

Todos aparecen con éxito en el mismo div con el id de 'homediv'. Sin embargo, quiero agregar una clase a cada uno de estos elementos por separado para diseñarlos de manera diferente en el CSS pero no funciona. Intenté 'addClass' pero hice lo siguiente en el código:

$("#homediv").append(time).addClass('time-style');
$("#homediv").append(place)addClass('place-style');
$("#homediv").append(who)addClass('who-style');

Pero eso simplemente no funciona. ¿Alguien puede detectar lo que estoy haciendo incorrectamente?

javascript jquery for-loop append

1

T.Doe 29 oct. 2019 a las 17:26

Answer 1

Intente esto en su lugar

$("#homediv").append(`<span class='time-style'>${time}</span>`);
$("#homediv").append(`<span class='place-style'>${place}</span>`);
$("#homediv").append(`<span class='who-style'>${who}</span>`);

O sin interpolación de cadenas (ES6)

$("#homediv").append("<span class='time-style'>" + time + "</span>");
$("#homediv").append("<span class='place-style'>" + place + "</span>");
$("#homediv").append("<span class='who-style'>" + who + "</span>");

4

stackoverfloweth 29 oct. 2019 a las 14:28

Answer 2

Supongamos que su elemento adjunto es un div:

$("#homediv").append("<div>time</div>").find("div").last().addClass('time-style');
$("#homediv").append("<div>place</div>").find("div").last().addClass('place-style');
$("#homediv").append("<div>who</div>").find("div").last().addClass('who-style');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="homediv"></div>

1

David 29 oct. 2019 a las 14:33

Answer 3

Debe obtener el último elemento () de $ ("# homediv") inmediatamente después de la acción append (), pero debe conocer la etiqueta del elemento adjunto:

$("#homediv").append(time);
$("#homediv").find('<time tag>').last().addClass('time-style');

Etcetera.

1

Cortez90 29 oct. 2019 a las 15:30

Cómo agregar una clase a una variable agregada que ya está llamando a un contenedor div en jQuery

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript