const parent = document.querySelector('ul');
.parent.querySelectorAll(':scope > *').forEach(n => parent.prepend(n));
// или
Element.prototype.append.apply(parent, [...parent.children].reverse());
// или
const [ first, ...rest ] = parent.children;
first?.before(...rest.reverse());
// или
for (const n of parent.children) {
parent.insertBefore(n, parent.firstElementChild);
}
// или
for (let i = parent.children.length; i--;) {
parent.insertAdjacentElement('beforeend', parent.children[i]);
}
// или
const elems = Array.from(parent.children);
while (elems.length) {
parent.appendChild(elems.pop());
}
const first = '125';
const startWithFirst = arr.filter(n => first.includes(`${n}`[0]));
console.log(startWithFirst);
const first = [ 1, 2, 5 ];
const startWithFirst = arr.filter(n => first.includes(n / (10 ** (Math.log10(n) | 0)) | 0));
const first = /^[125]/;
const startWithFirst = arr.filter(n => first.test(n));
новая_координата = Math.max(
минимальное_допустимое_значение,
Math.min(
максимальное_допустимое_значение,
текущая_координата + изменение_координаты
)
);
const getSrc = img => img.getAttribute('src');
// или
const getSrc = img => img.attributes.src.value;
const relativeOnly = f => img => {
const src = getSrc(img);
if (!/^https?:\/\//.test(src)) {
f(img, src);
}
};
document.querySelectorAll('img').forEach(relativeOnly((img, src) =>
img.outerHTML = `
<picture>
<source srcset="${src}" type="image/svg+xml">
${img.outerHTML}
</picture>`
));
const wrapImages = relativeOnly((img, src) => {
const picture = document.createElement('picture');
const source = document.createElement('source');
source.srcset = src;
source.type = 'image/svg+xml';
img.replaceWith(picture);
picture.append(source, img);
});
for (const n of document.getElementsByTagName('img')) {
wrapImages(n);
}
// или
Array.prototype.forEach.call(document.images, wrapImages);
const count = 10;
.const result = Array
.from({ length: count }, (n, i) => `"${-~i}"`)
.join(', ');
// или
const result = [...Array(count).keys()].reduce((acc, n) => {
return acc.concat(acc && ', ', '"', ++n, '"');
}, '');
// или
const result = (function xxx(n) {
return n > 0 ? xxx(n - 1) + (n === 1 ? '' : ', ') + '"' + n + '"' : '';
})(count);
// или
const result = Array(count)
.fill()
.map((n, i) => JSON.stringify((i + 1).toString()))
.toString()
.replace(/,/g, '$& ');
const buttonSelector = '.class2';
const classesToToggle = [ 'class3', 'class4' ];
$(buttonSelector).click(e => {
$(e.currentTarget).next().toggleClass(classesToToggle.join(' '));
});
document.querySelectorAll(buttonSelector).forEach(n => {
n.addEventListener('click', onClick);
});
function onClick() {
classesToToggle.forEach(n => this.nextElementSibling.classList.toggle(n));
}
document.addEventListener('click', e => {
const button = e.target.closest(buttonSelector);
if (button) {
for (const n of classesToToggle) {
button.parentNode.lastElementChild.classList.toggle(n);
}
}
});
const el = document.querySelector('#box');
const colors = [ 'red', 'green', 'blue' ];
let index = -1;
el.addEventListener('mouseenter', function() {
index = (index + 1) % colors.length;
this.style.backgroundColor = colors[index];
});
el.addEventListener('mouseleave', function() {
this.style.backgroundColor = '';
});
подскажите, что мне нужно подправить
function makeRequests(urls, max) {
return new Promise(resolve => {
const results = Array(urls.length).fill(null);
const groupedUrls = urls.reduce((acc, n, i) => ((acc[n] ??= []).push(i), acc), {});
const uniqueUrls = Object.keys(groupedUrls);
let countRequests = 0;
let countResponses = 0;
for (let i = 0; i < Math.max(1, Math.min(max, uniqueUrls.length)); i++) {
request();
}
function request() {
if (countResponses === uniqueUrls.length) {
resolve(results);
} else if (countRequests < uniqueUrls.length) {
const url = uniqueUrls[countRequests++];
fetch(url)
.then(result => result.json())
.catch(error => error)
.then(result => {
groupedUrls[url].forEach(n => results[n] = result);
countResponses++;
request();
});
}
}
});
}
state = {
modal: false,
}
hideModal = () => {
this.setState({ modal: false })
}
render() {
return (
...
{this.state.modal ? <Modal close={this.hideModal} /> : null}
...
);
}
return (
<div
className="modal-overlay"
onClick={e => (e.currentTarget === e.target) && props.close()}
>
<div className="modal-content">
...
</div>
</div>
);
routes: [
{
...
meta: { pageTitle: 'hello, world!!' },
},
{
...
meta: { pageTitle: 'fuck the world' },
},
...
],
<div>{{ $route.meta.pageTitle }}</div>
я знаю, что правильно менять состояние предыдущего state, то есть setState( prev => !prev ), но как это прописать для моего случая, когда предыдущее состояние должно поменять на значение item.value ?
setState(() => value)
.нажимаю кнопку Д после кнопки М и в indicator сохраняется значение кнопки М
useEffect(() => console.log('indicator: ', indicator), [ indicator ]);