const arr = [
[ 'author', 'Author - ' ],
[ 'name', 'Name' ],
[ 'currentTime', '00:00' ],
[ 'duration', '00:00' ],
];
arr.forEach(n => {
titleElement.appendChild(create({
el: 'span',
className: n[0],
text: n[1],
}));
});
// или
for (const [ className, text ] of arr) {
titleElement.insertBefore(create({
el: 'span',
className,
text,
}), null);
}
// или
for (let i = 0; i < arr.length; i++) {
titleElement.insertAdjacentElement('beforeend', create({
el: 'span',
className: arr[i][0],
text: arr[i][1],
}));
}
// или
titleElement.replaceChildren(...(function get(i, n = arr[i]) {
return n
? [ create({ el: 'span', className: n[0], text: n[1] }), ...get(-~i) ]
: [];
})(0));
const title = document.createElement('div');
title.id = 'title';
title.append(...arr.map(([ className, innerText ]) =>
Object.assign(document.createElement('span'), { className, innerText })
));
document.getElementById('root').append(title);
// или
document.querySelector('#root').innerHTML = `
<div id="title">${arr.map(n => `
<span class="${n[0]}">${n[1]}</span>`).join('')}
</div>
`;
const questionEl = document.querySelector('ul');
const resultsEl = document.querySelector('p span');
questionEl.addEventListener('change', showResults);
function showResults() {
resultsEl.innerText = Array.prototype.reduce.call(
questionEl.querySelectorAll('input[type="radio"]:checked'),
(acc, n) => acc + +n.value,
0
);
}
const isValid = n => n.workControl?.includes('intermediate');
const getFromTree = (tree, childrenKey, test) =>
Array.isArray(tree)
? tree.reduce((acc, n) => (
test(n) && acc.push(n),
acc.push(...getFromTree(n[childrenKey], childrenKey, test)),
acc
), [])
: [];
const result = getFromTree(tree, 'content', isValid);
function* getNestedData(data, test) {
if (test(data)) {
yield data;
}
if (data instanceof Object) {
for (const k in data) if (Object.hasOwn(data, k)) {
yield* getNestedData(data[k], test);
}
}
}
const result = [...getNestedData(tree, isValid)];
function getNestedData(data, test) {
const result = [];
for (const stack = [ data ]; stack.length;) {
const n = stack.pop();
if (test(n)) {
result.push(n);
}
if (n instanceof Object) {
stack.push(...Object.values(n).reverse());
}
}
return result;
}
const getFromTree = function*(tree, childrenKey, test) {
const stack = [];
for (let [ i, arr ] = this(tree); ++i < arr.length || stack.length;) {
if (i === arr.length) {
[ i, arr ] = stack.pop();
} else {
if (test(arr[i])) {
yield arr[i];
}
stack.push([ i, arr ]);
[ i, arr ] = this(arr[i][childrenKey]);
}
}
}.bind(x => [ -1, x instanceof Array ? x : [] ]);
const container = document.querySelector('селектор общего предка чекбоксов');
const checkboxSelector = 'селектор чекбоксов';
const minChecked = 1;
const maxChecked = Infinity;
const countChecked = checkboxes =>
Array.prototype.reduce.call(checkboxes, (acc, n) => acc + n.checked, 0);
const checkboxes = container.querySelectorAll(checkboxSelector);
const onChange = () => {
const count = countChecked(checkboxes);
const minReached = count <= minChecked;
const maxReached = count >= maxChecked;
checkboxes.forEach(n => n.disabled = minReached && n.checked || maxReached && !n.checked);
};
checkboxes.forEach(n => n.addEventListener('change', onChange));
container.addEventListener('change', function({ target: t }) {
if (t.matches(checkboxSelector)) {
const count = countChecked(this.querySelectorAll(checkboxSelector));
t.checked ||= count < minChecked;
t.checked &&= count <= maxChecked;
}
});
[Symbol.iterator]() { return this; }
и без:const iter = new Range(1, 5)[Symbol.iterator]();
console.log(iter.next().value);
console.log(iter.next().value);
console.log([...iter]);
Пытаюсь так:
let currentIndex = $(".js-practice_button.current").index();
Но значение всегда 0, у какой бы кнопки классcurrent
не присутствовал.
index
по умолчанию определяет индекс элемента среди соседей, а так как у каждой кнопки есть отдельный родитель... Ну да, получаете то, что получаете.const index = $('.js-practice_button.current').closest('li').index();
index
в качестве параметра селектор, то индекс будет определятся не среди соседей, а среди элементов, соответствующих селектору:const index = $('.js-practice_button.current').index('.js-practice_button');
const container = document.querySelector('.js-practices_buttons');
const itemSelector = '.practice_item';
const buttonSelector = `${itemSelector} .js-practice_button`;
const activeClass = 'current';
const activeSelector = `.${activeClass}`;
const index = Array.prototype.findIndex.call(
container.querySelectorAll(buttonSelector),
n => n.classList.contains(activeClass)
);
// или
const { children } = container;
let index = children.length;
while (index-- && !children[index].matches(`:has(${activeSelector})`)) ;
// или
const index =
(el => el ? [...el.parentNode.children].indexOf(el) : -1)
(container.querySelector(`${itemSelector}:has(${activeSelector})`));
// или
let index = -1;
for (
let el = container.querySelector(activeSelector)?.closest(itemSelector);
el;
el = el.previousElementSibling, index++
) ;
const noRepeatingDigits = num => !/(\d).*\1/.test(num);
// или
const noRepeatingDigits = num => -~Math.log10(num) === new Set(`${num}`).size;
// или
const noRepeatingDigits = num => [...'' + num]
.filter((n, i, a) => i !== a.indexOf(n))
.length === 0;
// или
const noRepeatingDigits = num => String(num)
.split('')
.reduce((acc, n) => (acc[n]++, acc), Array(10).fill(0))
.every(n => n < 2);
// или
const noRepeatingDigits = num =>
!''.match.call(num, /./g).some(function(n) {
return this[n] = Object.hasOwn(this, n);
}, {});
// или
const noRepeatingDigits = num =>
!Array.from(num.toString()).sort().find((n, i, a) => n === a[i + 1]);
for (let i = 0; i < arr.length; i++) {
if (!noRepeatingDigits(arr[i])) {
for (let j = i--; ++j < arr.length; arr[j - 1] = arr[j]) ;
arr.pop();
}
}
// или
arr.reduceRight((_, n, i, a) => noRepeatingDigits(n) || a.splice(i, 1), null);
// или
arr.splice(0, arr.length, ...arr.filter(noRepeatingDigits));
// или
arr.length -= arr.reduce((acc, n, i, a) => (
a[i - acc] = n,
acc + !noRepeatingDigits(n)
), 0);
const newArr = arr.filter(noRepeatingDigits);
// или
const newArr = [];
for (const n of arr) {
if (noRepeatingDigits(n)) {
newArr.push(n);
}
}
// или
const newArr = [];
for (let i = 0; i < arr.length; i++) {
if (noRepeatingDigits(arr[i])) {
newArr[newArr.length] = arr[i];
}
}
// или
const newArr = (function get(i, n = arr[--i]) {
return i >= 0
? get(i).concat(noRepeatingDigits(n) ? n : [])
: [];
})(arr.length);
const arrs = [
[ 1, 2, 3, 4 ],
[ 5, 6, 7, 8 ],
[ 9, 10, 11 ],
];
const result = [];
const max = Math.max(...arrs.map(n => n.length));
const index = Array(arrs.length).fill(0);
for (let i = 0; i < max; i++) {
for (let j = 0; j < index.length; j++) {
if (index[j] < arrs[j].length) {
result[result.length] = arrs[j][index[j]++];
}
}
}
const result = arrs
.reduce((acc, arr) => (
arr.forEach((n, i) => (acc[i] ??= []).push(n)),
acc
), [])
.flat();
const li = Array.prototype.filter.call(
document.querySelector('ul').children,
function(n) {
return this.every(([ k, v ]) => v === n.querySelector(`.${k}`).innerText);
},
Object.entries(items)
);
const li = [];
COLLECT_LI:
for (const n of document.querySelectorAll('li')) {
for (const k in items) {
if (Object.hasOwn(items, k) && items[k] !== n.querySelector('.' + k).textContent) {
continue COLLECT_LI;
}
}
li.push(n);
}
tags = Array.from(new Set(data.flatMap(n => n.tags)));
tags.splice(0, tags.length, ...new Set(data.flatMap(n => n.tags)));
async function getFirstLoadedImage(urls) {
for (const n of urls) {
try {
return await loadImage(n);
} catch (e) {}
}
throw 'ничего загрузить не удалось';
}
const getFirstLoadedImage = (urls, i = 0) => i < urls.length
? loadImage(urls[i]).catch(() => getFirstLoadedImage(urls, -~i))
: Promise.reject('ничего загрузить не удалось');
getFirstLoadedImage(resolutions.map(n => `https://i.ytimg.com/vi/${videoId}/${n}.jpg`))
.then(img => document.body.append(img))
.catch(console.error);
const datasetsSumIndex = new Map(DATASETS
.map(n => [ n, n.data.reduce((acc, m) => acc + m, 0) ])
.sort((a, b) => b[1] - a[1])
.map((n, i) => [ n[0], i ])
);
// в случае, если в DATASETS элементов больше, чем в colors,
// можно подставлять какое-то дефолтное значение
const defaultColor = { primary: '...', secondary: '...' };
const result = DATASETS.map(n => ({
...n,
...(colors[datasetsSumIndex.get(n)] ?? defaultColor),
}));
function groupValues(arr, defaultValue = null) {
const keys = [...new Set(arr.flatMap(Object.keys))];
return arr.reduce((acc, n) => {
keys.forEach(k => acc[k].push(Object.hasOwn(n, k) ? n[k] : defaultValue));
return acc;
}, Object.fromEntries(keys.map(k => [ k, [] ])));
}
const result = groupValues(arr);
const groupValues = (arr, defaultValue = null) =>
arr.reduce((acc, n, i, a) => (
Object.keys(n).forEach(k =>
(acc[k] ??= Array(a.length).fill(defaultValue))[i] = n[k]
),
acc
), {});
const containerSelector = '.selectboxss';
const itemClass = 'selectoption';
const itemSelector = `${containerSelector} .${itemClass}`;
const getClasses = el => Array.prototype.filter.call(el.classList, n => n !== itemClass);
//const getClass = el => RegExp(`${itemClass}-\\d+`).exec(el.className)[0];
function updateClasses(item) {
const container = item.closest(containerSelector);
const items = container.querySelectorAll(itemSelector);
const { classList: cl } = container;
cl.remove(...Array.prototype.flatMap.call(items, getClasses));
cl.add(...getClasses(item));
//cl.remove(...Array.from(items, getClass));
//cl.add(getClass(item));
}
document.querySelectorAll(itemSelector).forEach(function(n) {
n.addEventListener('click', this);
}, e => updateClasses(e.currentTarget));
document.addEventListener('click', ({ target: t }) =>
(t = t.closest(itemSelector)) && updateClasses(t)
);
tableValues(element);
element.children
/element.childNodes
.document.querySelector('form').childNodes
children
вместо childNodes
. Ну и погуглите, в чём между ними разница.if (element.nodeType == 1 && element.nodeName == 'INPUT' || element.nodeName == 'SELECT') {
nodeType
лишняя. Кроме того, вам не помешает разобраться с приоритетом выполнения операторов - nodeType
вы тут проверяете только для input'а.let result = [];
const getValues = el =>
el instanceof Element
? [ 'INPUT', 'SELECT' ].includes(el.tagName)
? [ el.value ]
: [...el.children].flatMap(getValues)
: [];
// или
const getValues = el =>
[ 'INPUT', 'SELECT' ].includes(el?.tagName)
? [ el.value ]
: [].flatMap.call(el.children ?? [], getValues);
const values = getValues(document.querySelector('form'));
const values = Array.from(document.querySelector('form').elements, n => n.value);
const getFromDOMNodes = (node, test, getVal) =>
node instanceof Node
? Array.prototype.reduce.call(
node.childNodes,
(acc, n) => (acc.push(...getFromDOMNodes(n, test, getVal)), acc),
test(node) ? [ getVal(node) ] : []
)
: [];
// или
function getFromDOMNodes(root, test, getVal) {
const tw = document.createTreeWalker(root);
const result = [];
for (let n = null; n = tw.nextNode(); test(n) && result.push(getVal(n))) ;
return result;
}
const values = getFromDOMNodes(
document.querySelector('form'),
node => [ 'INPUT', 'SELECT' ].includes(node.nodeName),
node => node.value
);
const values = {
RUS: [ 'раз значение', 'два значение', 'три' ],
US: [ '...', '...', '...' ],
// ...
};
const items = document.querySelectorAll('li');
const buttons = document.querySelectorAll('button');
buttons.forEach(n => n.addEventListener('click', onClick));
function onClick({ target: { innerText: key } }) {
items.forEach(function(n, i) {
n.innerText = this[i] ?? `ЗНАЧЕНИЕ #${i} ДЛЯ ${key} НЕ ЗАДАНО`;
}, values[key] ?? []);
}
const buttonSelector = '.added';
const itemSelector = '.added-block';
const activeClass = '_active';
const notActiveSelector = `${itemSelector}:not(.${activeClass})`;
const newActiveCount = 2;
function onButtonClick(button) {
const items = [...button.parentNode.querySelectorAll(notActiveSelector)];
items.slice(0, newActiveCount).forEach(n => n.classList.add(activeClass));
button.disabled = items.length <= newActiveCount;
}
document.querySelectorAll(buttonSelector).forEach(function(n) {
n.addEventListener('click', this);
}, e => onButtonClick(e.currentTarget));
document.addEventListener('click', ({ target: t }) =>
(t = t.closest(buttonSelector)) && onButtonClick(t)
);
str.match(/\d+/g).join('.')