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?
3 respuestas
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>");
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>
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.
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.