Как вывести через for цикл элементы?

Question

[funkydance]

На сайте - клац через JS реализовал вывод дат доставки. Но, столкнулся с проблемой. Выводится только у первой записи.

var day = document.querySelector(".day"); - Тут хранятся дни доставки. Я получаю эти дни и если они есть, то создаю изображение этого дня в диве с классом dayimage.

var dayimage = document.querySelector(".dayimage");

Для первой записи работает всё отлично. А вот для остальных нет. Пробовал через цикл for подсчитывать количество элементов day в разметке и это количество подставлять в dayimage[i]. В итоге не вышло и я запутался.

var day = document.querySelector(".day");
var dayimage = document.querySelector(".dayimage");

if (day.textContent.indexOf('пн') !== -1) {
  	var image = document.createElement('img');
        image.src = 'https://fermeda.ru/iconfood/pnr.png';
			dayimage.appendChild(image);
} else {
  	var image = document.createElement('img');
        image.src = 'https://fermeda.ru/iconfood/pnn.png';
        dayimage.appendChild(image);
}

Comments

[Aves]

const data = {
  пн: 'pn',
  вт: 'vt',
  ср: 'sr',
  чт: 'cht',
  пт: 'pt',
  сб: 'sb',
  вс: 'vs'
};

document.querySelectorAll('.day').forEach(e => {
  const text = e.textContent;
  const output = e.nextElementSibling.lastElementChild;
  for (const [name, value] of Object.entries(data))
    output.insertAdjacentHTML(
      'beforeend',
      `<img src="https://fermeda.ru/iconfood/${data[name]}${text.includes(name) ? 'r' : 'n'}.png">`
    );
});

[funkydance]

Aves, Супер. То что нужно. Можете в виде полного ответа это решение опубликовать, выберу правильным решением. Спасибо!

Answer 1

[Иван Соломенников]

document.querySelectorприменяется к одному элементу, если вам необходимо несколько элементов, заюзайте document.querySelectorAll Потом проверяете количество элементов и крутите цикл.

Почитать о методе - https://developer.mozilla.org/ru/docs/Web/API/Docu...

Comments

[funkydance]

Я само собой использовал querySelectorAll, в топике скинул рабочий вариант. Без моих чудо попыток.

[Иван Соломенников]

funkydance, С чем не разобрались, как написать цикл for?

[funkydance]

Иван Соломенников, цикл то написать я знаю как) for (let i = 0; i < day.lenght; i++) { }

Я запутался какой порядок действий)))

Мне нужно циклом получить количество элементов с классом .day и подставить их в .dayimage или наоборот. Хотя и так, и так пробовал..... вообщем запутался в цепочке действий.

[Иван Соломенников]

funkydance, порядок действий простой, выбираете элементы, например с помощью document.querySelectorAll, в цикле проверяете количество элементов, крутите цикл, производите необходимое действие над элементами.

Но у вас нужно после шага document.querySelectorAll, посмотреть есть ли вообще какая выборка, посмотрите в консоли с помощью console.log

Answer 2

[Lynatik001]

$('.info').each((i, elem) => {
      sports.push([$(elem).text()])
}

вот как я в jQery недавно перебирал все елементы с классом info.

Comments

[Пашенька]

Ну во-первых: джейквери пора выбросить на помойку и рекомендовать код на джейквери в качестве ответа к вопросу на нативе - это дурной тон, а во-вторых: какое отношение имеет ваш опыт с чем-либо к данному вопросу?

[Lynatik001]

Пашенька, какое еще отношение. Я лишь предложил свой вариант реализации. А чем джейквери плох. Устарел? Если есть время по флудить, в комментарии, то по флуди лучше в качестве ответа, на вопрос. а не претензии почему не идеально то-то.

[Пашенька]

Lynatik001, ты - дилетант, куда ты вообще лезешь с своими ответами?
На вопрос уже дали ответ и он слишком примитивен, чтобы на него вообще отвечать, так как дублирует тысячи других по всему интернету.

[Lynatik001]

Пашенька, тыкать будешь своему коту. - дилетант что предложил рабочий вариант. Потрудился, Время потратил на пост. А ты кто? Срать в комменты только горазд

[WapSter]

Lynatik001, п.. на заборах рисовать люди так же тратят время)

[Пашенька]

Lynatik001, ты ещё и долбаёб впридачу, я к тебе на вы обратился, а тыкать начал ты, лунтик. Потрудился он.. Не устал? Потрудись разобраться в предметной области сначала.

[Lynatik001]

WapSter, ну хз, я вот не ругался. когда мне на вопрос по яваскрипте бот телега - ответили примером на питоне. А тут джквери это либа яваскрипта. и столько наглости и ЧСВ у челика

[Lynatik001]

на большинство вопросов по нему вообще нечего не отвечали. и хотелось бы, что бы хоть что то немного дельное ответили. например что ето хотя бы реализуемо на другом языке - я бы понял что ето реализуемо. - пытался найти апи в телеге, что бы конкретная кнопка по размеру контекста в ней соотносила свой размер

Answer 3

[WapSter]

У тебя разметка под эту задачу не очень, в ней нужно искать соседний элемент и от него отталкиваться. А пробежаться по элементам и подставить в дочерний можно вот так

Comments

[funkydance]

Спасибо за помощь) Aves предоставил правильное решение. Ещё раз спасибо.

Answer 4

[Tim]

var day = document.querySelectorAll(".day");
for(let i = 0; i < day.length; i++) {
    console.log( day[i] )
}

Можно превратить в массив и использовать методы массивов. Например:

[... document.querySelectorAll(".day")].map( item => console.log(item))

Для более подробного ответа скидывайте разметку и описание

upd:

const createImage = url => {
  let image = document.createElement('img');
  image.src = url;
  dayimage.appendChild(image);
}

document.querySelectorAll(".day").forEach(item => item.textContent.indexOf('пн') + 1 ? createImage('https://fermeda.ru/iconfood/pnr.png') : createImage('https://fermeda.ru/iconfood/pnn.png'))

Comments

[Lynatik001]

с масивом прикольно выглядит