Как вывести в цикле на JS список альбомов?

Question

DiaTMss @DiaTMss

JavaScript

Как вывести в цикле на JS список альбомов?

Знатоки JS. Подскажите вроде бы тривиальная задача. Не могу вывести не на php не на js. Есть массив из 12 элементов. В цикле пробегаюсь по элементам массива предварительно задав условие, чтобы через каждые 2 блока выводился вспомогательный блок 12 % 2 === 0 Сколько нужно циклов чтобы вывести 7 вспомогательных блоков и 12 записей?

div
0
1
/div

div
2
3
/div

div
4
5
/div

div
6
7
/div

div
8
9
/div

div
10
11
/div

div
11
/div

Вопрос задан более трёх лет назад
150 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 2

1 комментарий

5 комментариев

DiaTMss @DiaTMss Автор вопроса

Да, спасибо вам огромное! Замучился с вставкой через innerHTML

<div class="box_album" id="box_album">

</div>

<div class="col_album row"> - вот этот вспомогательный div) 
                        <div class="album row">
                            <div class="cover_album">
                                <img src="images/cover_drippin_in_finesse.jpg">
                            </div>
                            <div class="info_album">
                                <h3>Drippin in Finesse</h3>
                                <h2>Lil Fil</h2>

                                <hr>

                                <p>Album contains 6 tracks</p>
                            </div>
                        </div>

                        <div class="album row">
                            <div class="cover_album">
                                <img src="images/cover_hard_way.jpg">
                            </div>
                            <div class="info_album">
                                <h3>Hard Way</h3>
                                <h2>Lil Fil</h2>

                                <hr>

                                <p>Album contains 6 tracks</p>
                            </div>
                        </div>
                    </div>

Написано более трёх лет назад

hzzzzl @hzzzzl

DiaTMss, вообще есть подозрение, что ты хочешь выводить по два альбома в ряд просто?
может быть это проще сделать через css, если так

https://codepen.io/anon/pen/aMrNvB

Написано более трёх лет назад

hzzzzl @hzzzzl

DiaTMss, можно к элементу добавлять дивы же так

html = `<div class="col_album row">.....` // пусть сюда идет весь хтмл дива
newDiv = document.createElement('div') // будущий элемент
newDiv.innerHTML = html  // в него бросаем содержимое
document.querySelector('#my-albums-wrapper').appendChild(newDiv) // и добавляем

выходит более наглядно, чем если всё делать типа wrapperHTML.innerHTML = wrapperHTML.innerHTML + `.....`

Написано более трёх лет назад

DiaTMss @DiaTMss Автор вопроса

hzzzzl, спасибо да верно по два альбома в ряд просто у меня потом json будет на css реализовал а на js не осилил(

for(var a = 0; album.id_album.length > a; a++)
{
if(a % 2 === 0)
        {
            box_album.innerHTML += '<div class="col_album row">';

            box_album.innerHTML += '</div>';
        }*/

        /*else
        {
            box_album.innerHTML += 
                '<div class="album row">' +
                    '<div class="cover_album">' +
                        '<img src="' + album.id_album[a].cover + '">' +
                    '</div>' +
                    '<div class="info_album">' +
                        '<h3>' + album.id_album[a].album + '</h3>' +
                        '<h2>' + album.id_album[a].artist + '</h2>' +
                        '<hr>' +
                        '<p>Album contains 6 tracks</p>' +
                    '</div>' +
                '</div>';
        }

var album =
    {
        'id_album' :
        [
            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'Drippin in Finesse',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'HARD WAY',
    			artist : 'Lil Fil',
            },
            
            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'PIXEL',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'ATMOSPHERIC',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'AK-47',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'KATANA BLADE',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'CHAINS',
    			artist : 'Lil Fil',
            },
            
            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'OUTER SPACE',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'ILLUSIONS',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'FLEXIN',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'FLEXIN',
    			artist : 'Lil Fil',
            }
        ]
    }

Написано более трёх лет назад

hzzzzl @hzzzzl

DiaTMss, йоу
https://codepen.io/anon/pen/xBNOyB

или во чуть поаккуратнее
https://codepen.io/anon/pen/PLvGjJ

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

Простой
Как вывести фотографии из папки или из контейнера последовательно с отработкой на каждой анимации?
- 1 подписчик
- 19 часов назад
- 31 просмотр
1

ответ
JavaScript

Простой
Как проверить три последние цифры числа и по условию изменить их?
- 1 подписчик
- 22 часа назад
- 134 просмотра
2

ответа
JavaScript

Простой
Как правильнее организовать код калькулятора?
- 1 подписчик
- вчера
- 116 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Как поменять тип проекции карты в Leaflet?
- 3 подписчика
- вчера
- 725 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- 02 мая
- 68 просмотров
0

ответов
JavaScript

Простой
Почему не срабатывает prototype reverse на строке?
- 1 подписчик
- 01 мая
- 58 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- 01 мая
- 180 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как сделать ajax фильтрацию по категориям в WP?
- 1 подписчик
- 01 мая
- 57 просмотров
0

ответов
JavaScript

Средний
Как сделать, чтобы встроенный обработчик события убрал сам себя?
- 3 подписчика
- 01 мая
- 706 просмотров
4

ответа
JavaScript

Простой
Как реализовать карирование так, чтобы оно не было замкнуто на одну переменную?
- 1 подписчик
- 01 мая
- 95 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

ASO дизайн для ios приложения (Иконка+Скриншоты)

04 мая 2024, в 12:04

5000 руб./за проект

Flutter (IOS) собрать приложение и внести правки

04 мая 2024, в 12:00

10000 руб./за проект

Посадить шаблон на WP

04 мая 2024, в 11:59

20000 руб./за проект

Answer 1 · 2019-03-26 22:09:11

const chunks = (arr, chunkSize) =>
  arr.reduce((acc, n, i) => (
    (i % chunkSize) || acc.push([]),
    acc[acc.length - 1].push(n),
    acc
  ), []);


const data = [...Array(12).keys()];
const chunkSize = 2;

const html = chunks(data, chunkSize)
  .map(n => `<div>${n.map(m => `<div>${m}</div>`).join('')}</div>`)
  .join('');

Answer 2 · 2019-03-26 22:13:34

что-то я не понял что куда надо выводить

doublediv = []
arr = [0,1,2,3,4,5,6,7,8,9,10,11,12]

for (let i = 0; i < arr.length; i++) {
	if(doublediv.length < 2) {
		doublediv.push(arr[i])
	} else {
		console.log(doublediv)
		console.log('extra div')
		doublediv = [arr[i]]
	}
}

так?

Как вывести в цикле на JS список альбомов?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт