$('.list').find('li:gt(2)').hide();
// или
$('li:gt(2)', '.list').hide();
// или
$('.list li:nth-child(3)').nextAll().hide();
// или
$('.list li:nth-child(n + 4)').hide();
// или
$('.list li').next().next().next().hide();
// или
$('.list > + + +').hide();Array
.from(document.querySelectorAll('.list'))
.flatMap(n => [...n.children].slice(3))
.forEach(n => n.hidden = true);
// или (тут надо будет стиль добавить: .hidden { display: none; })
[].forEach.call(document.getElementsByClassName('list'), n => {
[].forEach.call(n.getElementsByTagName('li'), (m, i) => {
m.classList.toggle('hidden', i > 2);
});
});hide('.list', 'li', 3);): function hide(containerSelector, elementSelector, hideFrom) {
$(containerSelector).each((i, n) => {
$(elementSelector, n).slice(hideFrom).hide();
});
}
// или
function hide(containerSelector, elementSelector, hideFrom) {
for (const n of document.querySelectorAll(containerSelector)) {
const elements = n.querySelectorAll(elementSelector);
for (let i = hideFrom; i < elements.length; i++) {
elements[i].style.display = 'none';
}
}
}const marker = new ymaps.Placemark([ latitude, longitude ], {}, {
preset: 'islands#redHomeIcon',
});
map.geoObjects.add(marker);.section, внутренний - .section__item:class App extends React.Component {
state = {
cards: Array.from({ length: 7 }, (_, i) => ({
id: i + 1,
content: Math.pow(i, 3),
})),
}
addElem = () => {
this.setState(({ cards }) => ({
cards: [ ...cards, {
id: cards.length + 1,
content: Math.random().toString(16).slice(2),
} ],
}));
}
render() {
const { cards } = this.state;
const chunkLen = 3;
const chunks = Array.from(
{ length: Math.ceil(cards.length / chunkLen) },
(_, i) => cards.slice(i * chunkLen, (i + 1) * chunkLen)
);
return (
<div>
<button onClick={this.addElem}>add new element</button>
{chunks.map(n => (
<div className="section">
{n.map(m => (
<div className="section__item">
<a>#{m.id} {m.content}</a>
</div>
))}
</div>
))}
</div>
);
}
}В колонках где tbody я смог реализовать
<template slot="isActive" slot-scope="{ item }">
<b-form-checkbox v-model="item.isActive"></b-form-checkbox>
</template>но вот в thead не получается
true, если все чекбоксы true; сеттер - назначаете всем чекбоксам переданное значение:checkedAll: {
get() {
return this.items.every(n => n.isActive);
},
set(val) {
this.items.forEach(n => n.isActive = val);
},
},<template slot="HEAD_isActive" slot-scope="data">
<b-form-checkbox
@click.native.stop
:checked="checkedAll"
@change="checkedAll = $event"
></b-form-checkbox>
</template>add() {
const clone = this.clone.cloneNode(true);
clone.dataset.index = this.index++;
this.beforeInsert.before(clone);
}.filter-values класс лучше переключать у их самых дальних не общих предков, т.е., у .material-block. В этом случае не надо искать внутри контейнера элемент, у которого должен быть переключен класс, а если в будущем захотите внутри открытого .material-block стилизовать ещё какой-то элемент, то не придётся переписывать js-код.- .material-block .filter-values.open {
+ .material-block.open .filter-values {const containerSelector = '.material-block';
const buttonSelector = `${containerSelector} .catalog-filter-block-title`;
const activeClass = 'open';$(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);
});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);
}
});
});.expanded). Гуглите "делегирование".click(false) не годится в качестве отмены действия по умолчанию - надо сделать нормальный обработчик, в котором выполнять preventDefault. Типа так (ну или тоже через делегирование, но это как-то глупо будет выглядеть - два обработчика одного события, хотя мог бы быть и один).
ни одно из вышеперечисленных условий симметричности не выполняется
$('.break-word').html((i, html) => {
const [ a, b, c ] = html.split(' ');
return `${a} ${b}<br>${c}`;
});document.querySelectorAll('.break-word').forEach(n => {
n.innerHTML = n.innerText.replace(/(.+ .+) /, '$1<br>');
});category.id === this.$route.params.category$route.params.category? И не получается ли так, что вы пытаетесь сравнивать значения разных типов? - скажем, category.id является числом, а params.category строкой.
почему-то не отрабатывает ни один из хуков
Object.entries(comments).reduce((acc, [ k, v ]) => v.parent === null ? { ...acc, [k]: v } : acc, {})Object.values(comments).reduce((acc, n) => (n.parent === null && (acc[n.id] = n), acc), {})