function filter(obj, key, f) {
const keys = Object.keys(obj);
return (obj[key] || []).reduce((acc, n, i) => (
f(n) && keys.forEach(k => acc[k].push(obj[k][i])),
acc
), keys.reduce((acc, k) => (acc[k] = [], acc), {}));
}
const result = filter(obj, 'years', n => 2012 <= n && n <= 2014);
function filter(obj, f) {
const keys = Object.keys(obj);
const length = keys.length && obj[keys[0]].length;
const result = Object.fromEntries(keys.map(k => [ k, [] ]));
for (let i = 0; i < length; i++) {
if (f(i, obj)) {
keys.forEach(k => result[k].push(obj[k][i]));
}
}
return result;
}
const result = filter(obj, (i, { years: { [i]: n } }) => 2012 <= n && n <= 2014);
- .dropdown__block.open {
+ .dropdown.open .dropdown__block {
const containerSelector = '.dropdown';
const buttonSelector = `${containerSelector} .dropdown__toggler`;
const activeClass = 'open';
// jquery, как вы и хотели
$(document).on('click', ({ target: t }) => {
const $container = $(t).closest(containerSelector);
const $button = $(t).closest(buttonSelector);
if ($button.length) {
$container.toggleClass(activeClass);
}
$(containerSelector).not($container).removeClass(activeClass);
});
// или, к чёрту jquery
document.addEventListener('click', ({ target: t }) => {
const container = t.closest(containerSelector);
const button = t.closest(buttonSelector);
if (button) {
container.classList.toggle(activeClass);
}
document.querySelectorAll(containerSelector).forEach(n => {
if (n !== container) {
n.classList.remove(activeClass);
}
});
});
.hidden {
display: none;
}
const itemSelector = '.item-service';
const className = 'hidden';
function toggleUntilNextItem(el) {
while ((el = el.nextElementSibling) && !el.matches(itemSelector)) {
el.classList.toggle(className);
}
}
document.querySelectorAll(itemSelector).forEach(function(n) {
n.addEventListener('click', this);
}, e => toggleUntilNextItem(e.currentTarget));
// или
document.addEventListener('click', e => {
const item = e.target.closest(itemSelector);
if (item) {
toggleUntilNextItem(item);
}
});
Object.entries(obj).filter(n => Number.isInteger(+n[0])).map(n => n[1]).join(';')
// или
Object.keys(obj).reduce((acc, n) => (`${+n}` === n && acc.push(obj[n]), acc), []).join(';')
// или
Array.from(obj).join(';')
// или
JSON.stringify(obj).match(/(?<="\d+":").*?(?=")/g).join(';')
$('.links').on('mouseover', 'a', function() {
$(this).closest('.block').find('img').attr('src', $(this).data('src'));
});
document.addEventListener('mouseover', ({ target: t }) => {
const { src } = t.dataset;
if (src) {
t.closest('.block').querySelector('img').src = src;
}
});
document.querySelectorAll('[data-src]').forEach(function(n) {
n.addEventListener('mouseenter', this);
}, ({ target: t }) => t
.parentNode
.parentNode
.nextElementSibling
.setAttribute('src', t.getAttribute('data-src'))
);
$('.open-category').click(function() {
$(`.d-none[data-id="${this.dataset.id}"]`).toggleClass('active');
});
for (const n of document.getElementsByClassName('open-category')) {
n.addEventListener('click', onClick);
}
function onClick({ target: { dataset: { id } } }) {
document.querySelector(`.d-none[data-id="${id}"]`).classList.toggle('active');
}
const elements = new Map(Array.from(
document.querySelectorAll('.open-category'),
n => [ n, document.querySelector(`.d-none[data-id="${n.dataset.id}"]`) ]
));
document.addEventListener('click', e => {
elements.get(e.target)?.classList.toggle('active');
});
идет смещение индексов, но как это обойти, уже не знаю
for (let i = arr.length; i--;) {
invItems.splice(arr[i], 1);
}
for (const n of [...arr].reverse()) {
invItems.splice(n, 1);
}
for (const [ i, n ] of arr.entries()) {
invItems.splice(n - i, 1);
}
invItems.splice(0, invItems.length, ...invItems.filter((n, i) => !arr.includes(i)));
let numDeleted = 0;
for (let i = 0; i < invItems.length; i++) {
invItems[i - numDeleted] = invItems[i];
numDeleted += i === arr[numDeleted];
}
invItems.length -= numDeleted;
async function fetchRecursive(arr) {
const result = [];
if (Array.isArray(arr)) {
for (const n of arr) {
try {
result.push({ status: true, result: await fetch(n.url).then(r => r.json()) });
} catch(error) {
result.push({ status: false, error });
}
result.push(...await fetchRecursive(n.children));
}
}
return result;
}
const flat = arr => (arr || []).flatMap(n => [ n.url, ...flat(n.children) ]);
const fetchRecursive = arr => Promise.allSettled(flat(arr).map(n => fetch(n).then(r => r.json())));
<div class="comment" data-id="187">
<a class="comment-edit">Редактировать</a>
<span class="comment-panel"></span>
</div>
.comment .comment-panel {
display: none;
}
.comment.editing .comment-panel {
display: inline;
}
.comment.editing .comment-edit {
color: red;
}
const containerSelector = '.comment';
const buttonSelector = '.comment-edit';
const activeClass = 'editing';
// вот вам ваш jquery
$(containerSelector).on('click', buttonSelector, e => {
const id = $(e.delegateTarget).toggleClass(activeClass).data('id');
console.log(id);
});
// или, к чёрту jquery
document
.querySelectorAll(`${containerSelector} ${buttonSelector}`)
.forEach(n => n.addEventListener('click', onClick));
function onClick() {
const container = this.closest(containerSelector);
container.classList.toggle(activeClass);
const { id } = container.dataset;
console.log(id);
}
document.querySelectorAll('.class-1').forEach(n => {
n.insertAdjacentHTML('afterbegin', `<div>${n.querySelector('span').dataset.name}</div>`);
});
$('.class-1').prepend(function() {
return $('<div>').text($('span', this).data('name'));
});
function codeAddress(address, geocoder, map) {
geocoder.geocode({ address }, function(results, status) {
if (status === 'OK') {
new google.maps.Marker({
map: map,
position: results[0].geometry.location,
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
address.forEach(n => codeAddress(n, geocoder, map));
const elements = document.querySelectorAll('li > ul');
const tag = 'span';
const text = 'hello, world!!';
elements.forEach(n => {
n.before(document.createElement(tag));
n.previousSibling.textContent = text;
});
for (const n of elements) {
const el = document.createElement(tag);
el.innerText = text;
n.parentNode.insertBefore(el, n);
}
for (let i = 0; i < elements.length; i++) {
elements[i].insertAdjacentHTML('beforebegin', `<${tag}>${text}</${tag}>`);
}
(function insert(i, n = elements[i]) {
if (n) {
const el = document.createElement(tag);
el.appendChild(new Text(text));
n.insertAdjacentElement('beforebegin', el);
insert(-~i);
}
})(0);
$('.list-item').filter((i, n) => $(n).data('pagereview') !== $(n).data('pageslug')).hide();
$('[data-pageslug]').each(function() {
const $this = $(this);
$this.toggle($this.attr('data-pagereview') === $this.attr('data-pageslug'));
});
document.querySelectorAll('.list-item').forEach(n => {
n.hidden = n.getAttribute('data-pagereview') !== n.getAttribute('data-pageslug');
});
for (const { style, dataset } of document.getElementsByClassName('list-item')) {
if (dataset.pagereview !== dataset.pageslug) {
style.display = 'none';
}
}
.hidden {
display: none;
}
const items = document.querySelectorAll('[data-pageslug]');
for (let i = 0; i < items.length; i++) {
const { classList: c, attributes: a } = items[i];
c.toggle('hidden', a['data-pagereview'].value !== a['data-pageslug'].value);
}
$('.price_min_max_btn').click(function() {
const min = +$('.price_min').val() || 0;
const max = +$('.price_max').val() || Infinity;
$('.item_block_filter')
.hide()
.filter(function() {
const price = +this.dataset.price;
return min <= price && price <= max;
})
.show();
});
document.querySelector('table').addEventListener('click', e => {
const td = e.target.closest('td');
if (td) {
const index = td.cellIndex;
console.log(index);
}
});
const arr = str.split('-');
const end = 'final';
const obj = arr.reduceRight((acc, n) => ({ [n]: acc }), end);
const obj = (function createObj(arr, i, end) {
return i < arr.length
? { [arr[i]]: createObj(arr, i + 1, end) }
: end;
})(arr, 0, end);
const result = graphData.map((n, i) => ({ ...n, color: palette[i % palette.length] }));
const combine = (arr, keys, values) =>
arr.map(({ ...n }, i) => (
values.forEach((m, j) => n[keys[j]] = m[i % m.length]),
n
));
const result = combine(graphData, [ 'color' ], [ palette ]);