Как добавить класс в добавляемую переменную, которая уже вызывает контейнерный div в jQuery - PullRequest
Новая
       37

Как добавить класс в добавляемую переменную, которая уже вызывает контейнерный div в jQuery

1 голос
/ 29 октября 2019

Я использую XML-файл извлечения для просмотра базы данных встреч для просмотра их на 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);
  }
}

Все они успешно отображаются в одном и том же div с идентификатором 'homediv. Однако я хочу добавить класс к каждому из этих элементов отдельно, чтобы по-разному их стилизовать в CSS, но это не работает. Я попытался добавить addClass, но сделал следующее в коде: 

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

Но это просто не работает. Кто-нибудь может определить, что я делаю неправильно?

Ответы [ 3 ]

4 голосов
/ 29 октября 2019

попробуйте вместо этого 

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

или без интерполяции строк (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>");
1 голос
/ 29 октября 2019

Вы должны получить последний () элемент $ ("# homediv") сразу после действия append (), но вы должны знать тег добавленного элемента: 

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

и т. Д.

1 голос
/ 29 октября 2019

Предполагается, что ваш добавленный элемент является 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>
...