найти последний div
const last = document.querySelector('#container').lastElementChild;
остальные удалить
Array.prototype.reduceRight.call(
document.getElementById('container').children,
(_, n) => n?.nextElementSibling && (n.outerHTML = ''),
null
);
const last = Array
.from(document.querySelectorAll('[id="container"] > *'))
.reduce((_, n, i, a) => i === ~-a.length ? n : n.remove(), null);
const table = document.querySelector('table');
const className = 'red';
const indices = Array.from(table.querySelectorAll(`thead .${className}`), n => n.cellIndex);
table.querySelectorAll('tbody tr').forEach(n => {
indices.forEach(i => n.cells[i].classList.add(className));
});
for (const { rows } of table.tBodies) {
for (const { cells } of rows) {
for (let i = 0, j = 0; i < cells.length; i++) {
j += cells[i].classList.toggle(className, i === indices[j]);
}
}
}
document.addEventListener('click', ({ target: t }) => {
if (t.classList.contains('box')) {
for (const n of document.querySelectorAll('.box')) {
n.style.background = n === t ? 'red' : 'black';
}
}
});
Меняет только value в input без изменения модели
v-model
слушает событие input, так что добавьте event.target.dispatchEvent(new Event('input'))
function getDatesGroupedByWeekday(year, month) {
const d = new Date(`${month} 1, ${year}`);
const iMonth = d.getMonth();
const result = {};
while (d.getMonth() === iMonth) {
const date = d.getDate();
const weekday = d.toLocaleString('en-US', { weekday: 'long' });
(result[weekday] = result[weekday] ?? []).push(date);
d.setDate(date + 1);
}
return result;
}
пишет что state is equal
basketItems: state.basketItems.sort((a, b) => a.price - b.price),
preg_match('~(\d+)\D*\.\D*(\d+)~', $str, $match);
$result = implode('.', array_slice($match, 1));
preg_match('~\d{2}\.\d{1,2}~', preg_replace('~[^\d.]~', '', $str), $match);
$result = $match[0];
const block = document.querySelector('.block');
const wrapper = document.createElement('div');
wrapper.classList.add('another__block');
const parent = block.parentNode;
const childNodes = [...parent.childNodes];
wrapper.append(...childNodes.slice(childNodes.indexOf(block) + 1));
parent.append(wrapper);
for (; block.nextSibling; wrapper.appendChild(block.nextSibling)) ;
block.after(wrapper);
fetch('https://jsonplaceholder.typicode.com/albums')
.then(r => r.json())
.then(r => {
const keys = [ 'userId', 'id', 'title' ];
// собираем разметку
document.body.insertAdjacentHTML('beforeend', `
<div class="wrapper">${r.map(n => `
<div class="item">${keys.map(k => `
<div>${k}: ${n[k]}</div>`).join('')}
</div>`).join('')}
</div>
`);
// или, создаём элементы напрямую
function createElement(tag, className, children) {
const el = document.createElement(tag);
el.className = className;
el.append(...children);
return el;
}
document.body.append(
createElement('div', 'wrapper', r.map(n =>
createElement('div', 'item', keys.map(k =>
createElement('div', '', [ `${k}: ${n[k]}` ])
))
))
);
});
.wrapper {
border: 3px solid black;
padding: 10px;
margin: 10px;
}
.item {
border: 1px solid silver;
padding: 5px;
margin: 5px;
}
const Search = props => {
const [ value, setValue ] = React.useState('');
return (
<div>
<input type="text" value={value} onChange={e => setValue(e.target.value)} />
<button onClick={() => props.onSearch(value)}>Search</button>
</div>
);
};
<Search onSearch={search => setValue({ ...value, inputValue: search })} />
.img-block
, а у их самых дальних не общих предков, т.е., у .documents_block
. В этом случае не придётся переписывать js-код, если вдруг потребуется стилизовать ещё-что то, кроме .img-block
, или если решите изменить внутреннюю структуру .documents_block
. Вместо .класс
дополнительные стили надо будет прописывать у .класс .img-block
.const itemSelector = '.documents_block';
const buttonSelector = `${itemSelector} .open-doc-list`;
const contentSelector = '.documents-content';
const activeClass = 'active';
const toggleEffect = 'slideToggle'; // или fadeToggle, или toggle
const onClick = e => $(e.currentTarget)
.closest(itemSelector)
.toggleClass(activeClass)
.find(contentSelector)
[toggleEffect]();
// обработчик клика подключаем к кнопкам
$(buttonSelector).click(onClick);
// или, если предполагается добавление новых блоков уже после подключения
// обработчика, то лучше будет повесить его на документ, тогда всё будет
// работать как надо без каких-либо дополнительных действий
$(document).on('click', buttonSelector, onClick);