Как нарисовать HTML карт классов

Question

Мне нужно использовать HTML карточки классов, чтобы отображать определенные данные на моей странице.

Это стиль, который я использую.

<style>
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

.row {margin: 0 -5px;}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}
</style>

Это HTML код, который я использую для вывода карты.

<div class="col-md-8">
            <div class="row">
                <div class="column">
                    <div id="roomList" class="card">
                    </div>
                </div>
            </div>
        </div>

Я использую ajax для загрузки данных из SQL. После загрузки данных в ajax данные добавляются в roomList для создания карты.

 $.ajax({
        url: '/HouseKeeping/OutOfOrderTXN/RoomList',
        dataType: 'json',
        method: 'GET',
        success: function (data) {
            debugger;
            $.each(data, function (index, eachRoomList) {
                $('#roomList').append( 
                    '<div class="row"><div class="column"><div class="card"> data-room-id="' + eachRoomList.Id + '" data-room-name="' + eachRoomList.RoomName + '"</div></div></div>>');
            })
        },
        error: function (error) {

        }
    });

+ eachRoomList.RoomName + В него загружаются, например, = 100,101,102

Но это не работает. Ниже показано, как нарисована моя карточка класса.

Данные не отображаются внутри класса 'card' для eg-100 должны отображаться внутри класса 'card', что не так с моим кодом.I ' м новичок, так что помогите мне, пожалуйста

введите описание изображения здесь

Answer 1

Если ваш запрос ajax успешен, существует проблема с добавлением дочернего элемента. Ваш div class = "card" не закрыт. Можете попробовать

$('#roomList').append(`<div class="row"><div class="column">   <div class="card" data-room-id="${eachRoomList.Id}" data-room-name="${eachRoomLi[![enter image description here][1]][1]st.RoomName}">${eachRoomList.RoomName}</div></div></div>`);