Как отсортировать li?

Question

[Алексей Орлов]

При вводе значений в поля данные пушатся в массив, в котором создаются обьекты со значениями. Эти объекты сортируются по убыванию значения ключа "х". Как применить такую же сортировку на создаваемые элементы li. Чтобы строки выводились в таком же порядке как и объекты в массиве?

Пример на Codepen

Answer 1

[Сергей Зенькович]

Если я правильно понял вопрос, то можно к каждому li, при его создании, присваивать атрибут, значение которого будет совпадать значению ключа "х". Потом также легко будет отсортировать эти li.

Comments

[Алексей Орлов]

Мне еще написали такое:

Чтобы строки выводились в таком же порядке, как и объекты в массиве надо просто сделать цикл )

Но пока что-то не получается. Можно сделать такой вот цикл:

for (const win of winArray) {
            const winsItem = document.createElement('li');
            winsItem.className = 'win wins__item';
            winsList.appendChild(winsItem);
            winsItem.innerHTML = 
            '<div class="win__char win__bet">' + win.bet + '</div>' + 
            '<div class="win__char win__sum">' + win.sum + '</div>' +
            '<div class="win__char win__x">' + win.x + '</div>';
}

Но тогда с каждым кликом на "Добавить", будет добавляться несколько li, а не по одному и сортировка будет происходить спустя пару нажатий на добавить.

[Сергей Зенькович]

По кускам кода не понятно вообще ничего. Ты можешь скинуть весь код и что именно нужно сделать

[Алексей Орлов]

Сергей Зенькович, Так в вопросе же есть "Пример на Codepen".

[Сергей Зенькович]

Исправил. Суть в том, что нужно брать сам массив за основу после его сортировки и мапить его в разметку, соответственно расположение разметки будет совпадать с массивом

function addWin() {
    const winsList = document.querySelector('.wins__list');
    const inputBet = document.querySelector('input[name="bet"]');
    const inputSum = document.querySelector('input[name="sum"]');
    const btnGetValues = document.querySelector('#btnGetValues');
    const winArray = [];

    function arrayWins(bet, sum, x) {
        winArray.push({bet, sum, x});
    }
	
	let renderItems = (array) => {
		let items = array.map((el) => {
			return `<li class = "win wins__item">
						<div class="win__char win__bet"> Ставка:  ${el.bet} </div>  
						<div class="win__char win__sum"> Выигрыш:  ${el.sum}</div> 
						<div class="win__char win__x"> X:  ${el.x}</div>
					</li>`
			});
		winsList.innerHTML = items.join(' ');	
	};

    btnGetValues.addEventListener('click', getValues);
    function getValues() {
        const winBet = Number(inputBet.value);
        const winSum = Number(inputSum.value)
        const winX = Number((winSum / winBet).toFixed(2));

        arrayWins(winBet, winSum, winX);
		winArray.sort((min, max) => min.x < max.x ? 1 : -1);
		renderItems(winArray);
        console.log(winArray);    
    }
}

addWin();

[Сергей Зенькович]

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