const Indicator = ({ value, max = 6 }) => (
<div>
{Array.from({ length: max }, (_, i) => (
<div className={`indicator-cell ${i < value ? 'active' : ''}`}></div>
))}
</div>
);.indicator-cell {
background: white;
}
.indicator-cell.active {
background: red;
}<Indicator value={4} />
<Indicator value={1} />
<Indicator value={8} max={12} />computed: {
highlightedText() {
const { text, search } = this;
return search
? text.split(RegExp(`(${search.replace(/[\\^$|.*?+{}()[\]]/g, '\\$&')})`, 'gi'))
: [ text ];
},
},<template v-for="(n, i) in highlightedText">
<mark v-if="i % 2">{{ n }}</mark>
<template v-else>{{ n }}</template>
</template>addEventListener в качестве третьего аргумента { once: true }.
$('#add-instr').click(function() {
$('#column-left').append(`
<article class="instruction">
<div class="name">
${$('#i-name').val()}
<button class="remove">x</button>
</div>
<div class="desc">
${$('#i-desc').val()}
</div>
</article>
`);
});
$('#column-left').on('click', '.remove', function() {
$(this).closest('.instruction').remove();
});const count = (arr, val) => arr.filter(n => n === val).length;
// или
const count = (arr, val) => arr.reduce((acc, n) => acc + (n === val), 0);function Counter(data, key = n => n) {
const counted = new Map;
for (const n of data) {
const k = key(n);
counted.set(k, (counted.get(k) ?? 0) + 1);
}
return k => counted.get(k) ?? 0;
}const arr = [ 1, 1, NaN, 1, 2, NaN, 9, NaN, NaN, 9, 7, 'hello, world!!', 'hello, world!!' ];
const counted = Counter(arr);
console.log(counted(1)); // 3
console.log(counted(NaN)); // 4
console.log(counted('hello, world!!')); // 2
console.log(counted(10)); // 0const counted = Counter('hello, world!!');
console.log(counted('o')); // 2
console.log(counted('l')); // 3
console.log(counted('x')); // 0<span class="color">red</span>
<span class="color">green</span>
<span class="color">red</span>
<span class="color">red</span>const counted = Counter(document.querySelectorAll('.color'), el => el.innerText);
console.log(counted('red')); // 3
console.log(counted('blue')); // 0const sortedElements = [...elements].sort((a, b) =>
+a.relations.includes(b.id) ||
-b.relations.includes(a.id) ||
a.name.localeCompare(b.name)
);<a data-problem="value1">
<a data-problem="value2"><a data-problem="value1|value2">$('.problem').change(function() {
const problems = $(':checked', this)
.get()
.map(({ dataset: { type, problem } }) => ({ type, problem }));
$(this)
.closest('.remont')
.find('.price__item')
.hide()
.filter((i, { dataset: d }) =>
problems.some(p => d.type === p.type && d.problem.includes(p.problem))
)
.show();
}).change();.product { display: flex;
flex-direction: column; для .product. Элементам внутри .product, которые должны находиться на одной строке, добавьте общие обёртки, которым также будет задан display: flex;.
$('.problem').change(({ target: t }) => {
const attrsSelector = [ 'type', 'problem' ]
.map(n => `[data-${n}="${t.dataset[n]}"]`)
.join('');
$(`.price-problem ${attrsSelector}`).toggle(t.checked);
}).find('input').change();$('.item img').wrap(function() {
return '<a href="' + $(this).attr('src') + '"></a>';
});document.querySelectorAll('.item img').forEach(n => {
n.outerHTML = `<a href="${n.attributes.src.value}">${n.outerHTML}</a>`;
});for (const n of document.querySelectorAll('.item img')) {
const a = document.createElement('a');
a.href = n.getAttribute('src');
n.after(a);
a.append(n);
}const markersData = [
{ position: { lat: ..., lng: ... }, content: '...' },
{ position: { lat: ..., lng: ... }, content: '...' },
...
];const infoWindow = new google.maps.InfoWindow();const markers = markersData.map(({ position, content }) => {
const marker = new google.maps.Marker({ position, map });
marker.addListener('click', () => {
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
return marker;
});null):const setActiveIcon = marker => markers.forEach(n => n.setIcon(n === marker ? iconActive : icon));function createTree(arr) {
const tree = Object.fromEntries(arr.map(({ parts, ...n }) => [ n.id, n ]));
arr.forEach(n => tree[n.id].children = n.parts?.map(m => tree[m]) ?? []);
return Object.values(tree).filter(n => arr.every(m => !m.parts?.includes(n.id)));
}