const el = document.querySelector('здесь селектор родительского элемента');
const text = '|||';Array.prototype.forEach.call(
el.children,
(n, i) => i && n.before(text)
);
// или
for (const n of el.children) {
if (n.nextElementSibling) {
n.insertAdjacentText('afterend', text);
}
}
// или
for (let i = 1; i < el.children.length; i++) {
el.insertBefore(document.createTextNode(text), el.children[i]);
}
// или
(function insert(i, n = el.children.item(i)) {
if (n) {
n.replaceWith(text, n);
insert(-~i);
}
})(1);
// или
el.querySelectorAll(':scope > * + *').forEach(n => {
n.outerHTML = text + n.outerHTML;
});const gallerySelector = '.js-product__item';
const previewSelector = '.view__item img';
const mainImageSelector = '.js-product__img--current';
const showImage = preview => preview
.closest(gallerySelector)
.querySelector(mainImageSelector)
.src = preview.src;document.addEventListener('click', ({ target: t }) =>
t.matches(previewSelector) && showImage(t)
);
// или
document.querySelectorAll(previewSelector).forEach(function(n) {
n.addEventListener('click', this);
}, e => showImage(e.target));const keys = [
[
{ on: [ 'ё', 'Ё' ], off: [ '`', '~' ], name: 'Backquote' },
{ on: [ '1', '!' ], off: [ '1', '!' ], name: 'Digit1' },
...
],
...
];
document.querySelector('.keyboard').innerHTML = keys.map(row => `
<div class="row">${row.map(n => `
<div class="key">
<span class="${n.name} on">
<span class="case down">${n.on[0]}</span>
<span class="case up">${n.on[1]}</span>
</span>
<span class="${n.name} off">
<span class="case down">${n.off[0]}</span>
<span class="case up">${n.off[1]}</span>
</span>
</div>`).join('')}
</div>`).join('');data-id={user.id}const elemId = +e.currentTarget.dataset.id;
начал читать про Angular и так и не понял, для чего он мне нужен
const urls = [
'http://sitename.net/somedirectory/14545/',
'http://sitename.net/somedirectory/14545/count-1145',
'http://sitename.net/somedirectory/14545/specific-345',
'http://sitename.net/somedirectory/14545/count-1145/specific-345',
];
const getParams = (url, params) =>
params instanceof Array && params.length
? (url.match(RegExp(`(${params.join('|')})-\\d+`, 'g')) || [])
.map(n => n.split('-'))
.reduce((acc, n) => (acc[n[0]] = n[1], acc), {})
: {};
const params = urls.map(n => getParams(n, [ 'count', 'specific' ]));const getParams = url =>
Object.fromEntries((url
.match(/[a-z]+-\d+/g) || [])
.map(n => n.split('-'))
);.dropdown-checkbox ul.opened {
display: block;
}<label @click="opened = !opened">click me</label>
<ul :class="{ opened }">
...data: () => ({
opened: false,
}),const [ first, second ] = [...arr]
.sort((a, b) => b.id - a.id)
.slice(0, 2)
.map(n => n.name);const [ { name: first }, { name: second } ] = arr.reduce((acc, n) => {
if (!(acc[0].id >= n.id)) {
acc[1] = acc[0];
acc[0] = n;
} else if (!(acc[1].id >= n.id)) {
acc[1] = n;
}
return acc;
}, [ {}, {} ]);cildrenconst copyTree = (tree, f) =>
tree.map(n => {
n = f instanceof Function ? f(n) : { ...n };
if (n.children instanceof Array) {
n.children = copyTree(n.children, f);
}
return n;
});
const dataCopy = copyTree(data, ({ name: key, ...x }) => ({ key, ...x }));<div id="content" v-on:hide="alert('ff')" ><el-popover
@hide="onHide"
...methods: {
onHide() {
alert('HIDE');
},
...Метод alert есть
в root событие v-on:hide не ловится
@hide="$emit('hide')"; подписались на событие в родителе, снова emit; ну и т.д., до корневого компонента (если что, в нём делать emit уже не надо, вместо него будет ваш alert).@hide="alert". На всех уровнях ниже, включая popover, тоже, только обработчик берёте уже не из методов, а из того, что сверху передано - @hide="$listeners.hide" (или v-on="$listeners", если надо передавать вниз всё, или кроме hide больше ничего нет).<el-popover
@hide="$root.$emit('popover-hide')"
...mounted() {
this.$on('popover-hide', this.alert);
...Vue.prototype.$eventBus = new Vue;. Этот способ самый гибкий - слушать события можно где угодно откуда угодно.<el-popover
@hide="$eventBus.$emit('popover-hide')"
...mounted() {
this.$eventBus.$on('popover-hide', this.alert);
...[...Array(n)]. Но, учитывая реально решаемую задачу, не надо никаких массивов, состоящих из undefined, заполняйте сразу тем, чем надо:const sequence = (length, pattern) =>
pattern instanceof Function
? Array.from({ length }, pattern)
: Array(length).fill(pattern);const select = document.querySelector('#country');
const value = 'europe';const options = select.querySelectorAll(`option[value*="${value}"]`);const options = Array.prototype.filter.call(
select.options,
n => n.value.includes(value)
);const options = [];
for (const n of select.children) {
if (n.value.indexOf(value) !== -1) {
options.push(n);
}
}document.querySelector('.allstatus-btn').addEventListener('click', () => {
const items = Object.fromEntries(Array.from(
document.querySelectorAll('.number-all'),
n => [ n.innerText, n ]
));
fetch('https://api.novaposhta.ua/v2.0/json/', {
method: 'POST',
body: JSON.stringify({
modelName: 'TrackingDocument',
calledMethod: 'getStatusDocuments',
methodProperties: {
Documents: Object.keys(items).map(n => ({
DocumentNumber: n,
Phone: '',
})),
},
apiKey: '',
}),
})
.then(r => r.json())
.then(r => r.data.forEach(n => items[n.Number].innerHTML += n.Status));
});this.setState(({ events }) => ({
events: events.map(n => n.id === id ? { ...n, title: newTitle } : n),
}));function createTree(data) {
const obl = {};
const org = {};
const podr = {};
data.forEach(n => {
obl[n.obl.id] = { ...n.obl, children: [] };
org[n.org.id] = { ...n.org, children: [] };
podr[n.podr.id] = { ...n.podr, children: [] };
});
data.forEach(n => podr[n.podr.id].children.push({ ...n.dolzh }));
Object.values(org).forEach(n => obl[n.parent_obl].children.push(n));
Object.values(podr).forEach(n => org[n.parent_org].children.push(n));
return Object.values(obl);
}
const tree = createTree(arr);