const checkItem = item => item.status === 'выполнено';
arr.sort((a, b) => +checkItem(a) || -checkItem(b));
// или
arr.reduceRight((_, n, i, a) => checkItem(n) && a.push(a.splice(i, 1)[0]), null);
// или
arr
.reduce((acc, n, i) => (
arr[i - acc.length] = n,
checkItem(n) && acc.push(n),
acc
), [])
.forEach((n, i, a) => arr[arr.length - a.length + i] = n);
const newArr = arr
.reduce((acc, n) => (
acc[+checkItem(n)].push(n),
acc
), [ [], [] ])
.flat();
// или
const newArr = arr.reduce((acc, n) => (
acc[checkItem(n) ? 'push' : 'unshift'](n),
acc
), []);
// или
const newArr = [
...arr.filter(n => !checkItem(n)),
...arr.filter(checkItem),
];
.card.show .text {
display: block;
}
const containerSelector = '.card';
const buttonSelector = 'button';
const activeClass = 'show';
document.addEventListener('click', e => {
const button = e.target.closest(buttonSelector);
const container = button && button.closest(containerSelector);
container && container.classList.toggle(activeClass);
});
// или
document
.querySelectorAll(`${containerSelector} ${buttonSelector}`)
.forEach(n => n.addEventListener('click', onClick));
function onClick() {
this.closest(containerSelector).classList.toggle(activeClass);
}
const ids = [ 9, 10 ];
const items = arr.flatMap(n => n.items);
// или
const items = Array.prototype.concat.apply([], arr.map(n => n.items));
// или
const items = arr.reduce((acc, n) => (acc.push(...n.items), acc), []);
const result = items.filter(n => ids.includes(n.id));
// или
const result = items.filter(function(n) {
return this.has(n.id);
}, new Set(ids));
// или
const itemsObj = Object.fromEntries(items.map(n => [ n.id, n ]));
const result = ids.reduce((acc, n) => ((n = itemsObj[n]) && acc.push(n), acc), []);
<button data-step="+1">PREV</button>
<button data-step="-1">NEXT</button>
const sliderSelector = '.slider';
const blockSelector = '.block';
const buttonDataAttr = 'step';
const buttonSelector = `[data-${buttonDataAttr}]`;
const activeClass = 'active';
const getActiveBlockIndex = () => ((-pos % len) + len) % len;
const getSliderRotation = () => 'rotate(' + pos * 360 / len + 'deg)';
let pos = 0;
const $slider = $(sliderSelector);
const $blocks = $slider.find(blockSelector);
const len = $blocks.length;
$(buttonSelector).click(function() {
$blocks.eq(getActiveBlockIndex()).removeClass(activeClass);
pos += parseInt($(this).data(buttonDataAttr));
$slider.css('transform', getSliderRotation());
$blocks.eq(getActiveBlockIndex()).addClass(activeClass);
});
const slider = document.querySelector(sliderSelector);
const blocks = slider.querySelectorAll(blockSelector);
const len = blocks.length;
document.querySelectorAll(buttonSelector).forEach(function(n) {
n.addEventListener('click', this);
}, function() {
blocks[getActiveBlockIndex()].classList.remove(activeClass);
pos += +this.dataset[buttonDataAttr];
slider.style.transform = getSliderRotation();
blocks[getActiveBlockIndex()].classList.add(activeClass);
});
.search('\\(')
. Или один, если замените строку на литерал регулярного выражения: .search(/\(/)
. const selector = '.test_wr .test_block';
const propName = 'top';
const getVal = i => `${i * 100}px`;
$(selector).css(propName, getVal);
// или
document.querySelectorAll(selector).forEach((n, i) => {
n.style[propName] = getVal(i);
});
Cannot read property 'concat' of null
В чем ошибка и как в итоге их объединить?
computed: {
fullArray() {
const { users, info } = this;
return user && info
? здесь объединяете данные массивов
: [];
},
},
json.results.map(({ lists, volume }) => {
return lists.map(({ tags, list }) => {
return tags.map(tag => ({ volume, list, tag }));
});
}).flat(2)
data: () => ({
date: new Date(),
}),
filters: {
formatDate1: d => d.toLocaleString('ru-RU').replace(',', '').slice(0, -3),
},
methods: {
formatDate2: d => [ 'Date', 'Month', 'FullYear', 'Hours', 'Minutes' ]
.map((n, i) => '.. :'.charAt(~-i) + `${d[`get${n}`]() + !~-i}`.padStart(2, 0))
.join(''),
},
<div class="fullDate">{{ date | formatDate1 }}</div>
<div class="fullDate">{{ formatDate2(date) }}</div>
скрипт работает лишь тогда, когда ты что-то напишешь в поле
const blockSelector = '.ingredient-b';
const inputSelector = 'input';
const className = 'display_none';
$(blockSelector)
.addClass(className)
.filter((i, n) => $(inputSelector, n).val())
.removeClass(className);
// или
document.querySelectorAll(blockSelector).forEach(n => {
n.classList.toggle(className, !n.querySelector(inputSelector).value);
});
$(`${blockSelector} ${inputSelector}`).on('input', ({ target: t }) => {
$(t).closest(blockSelector).toggleClass(className, !$(t).val());
}).trigger('input');
// или
document.querySelectorAll(`${blockSelector} ${inputSelector}`).forEach(function(n) {
n.addEventListener('input', this);
n.dispatchEvent(new Event('input'));
}, ({ target: t }) => t.closest(blockSelector).classList.toggle(className, !t.value));
Некоторые HTML-элементы, такие как<ul>
,<ol>
,<table>
и<select>
имеют ограничения на то, какие элементы могут отображаться внутри них, или например элементы, такие как<li>
,<tr>
и<option>
могут появляться только внутри других определённых элементов.
Это приведёт к проблемам при использовании компонентов с элементами, которые имеют такие ограничения. Например:
<table> <blog-post-row></blog-post-row> </table>
Пользовательский компонент<blog-post-row>
будет поднят выше, так как считается недопустимым содержимым, вызывая ошибки в итоговой отрисовке. К счастью, специальный атрибутis
предоставляет решение этой проблемы:
<table> <tr is="blog-post-row"></tr> </table>
function createTreeData(data, idKey, parentKey) {
const tree = Object.fromEntries(data.map(n => [ n[idKey], { ...n, children: [] } ]));
return Object
.values(tree)
.filter(n => !(tree[n[parentKey]] && tree[n[parentKey]].children.push(n)));
}
const createTreeHTML = data =>
Array.isArray(data) && data.length
? `<ul>${data.map(n => `
<li>
${n.name}
${createTreeHTML(n.children)}
</li>`).join('')}
</ul>`
: '';
const createTreeElement = data =>
data instanceof Array && data.length
? data.reduce((ul, n) => (
ul.append(document.createElement('li')),
ul.lastChild.append(n.name, createTreeElement(n.children)),
ul
), document.createElement('ul'))
: '';
const treeData = createTreeData(obj, 'id', 'parent_id');
document.body.insertAdjacentHTML('beforeend', createTreeHTML(treeData));
document.body.append(createTreeElement(treeData));
function createTreeElements(arr, idKey, parentKey) {
const tree = arr.reduce((acc, { [parentKey]: n }) => (
acc[n] = acc[n] || document.createElement('ul'),
acc
), {});
arr.forEach(n => (
tree[n[parentKey]].append(document.createElement('li')),
tree[n[parentKey]].lastChild.append(n.name, tree[n[idKey]] || '')
));
return Object.values(tree).filter(n => !n.parentNode);
}
document.body.append(...createTreeElements(obj, 'id', 'parent_id'));