class App extends React.Component {
state = {
cells: Array(16).fill(null),
probability: 0.7,
}
onClick = e => {
const index = +e.target.dataset.index;
this.setState(({ cells, probability }) => ({
cells: cells.map((n, i) => i === index && !n
? (Math.random() < probability ? 'black' : 'red')
: n
),
}));
}
render() {
return (
<div className="ColorS">
{this.state.cells.map((n, i) => (
<div
className="ColorS-grid"
style={n && { background: n }}
data-index={i}
onClick={this.onClick}
/>
))}
</div>
);
}
}
const parents = document.querySelectorAll('.news-block-2 tbody tr');const swapChildren = function(el, selectorA, selectorB) {
const a = this(el.children, n => n.matches(selectorA));
const b = this(el.children, n => n.matches(selectorB));
el.append(...Array.from(el.children, n => n === a ? b : n === b ? a : n));
}.bind(Function.prototype.call.bind(Array.prototype.find));parents.forEach(n => swapChildren(n, '.picture-news', '.text-news'));const swapChildren = el => el.append(...[...el.childNodes].reverse());
// или
const swapChildren = el => el.appendChild(el.firstElementChild);
// или
const swapChildren = el => el.insertBefore(el.children[0], null);
// или
const swapChildren = el => el.insertAdjacentElement('beforeend', el.children[0]);
// или
const swapChildren = el => el.prepend(el.querySelector(':scope > :last-child'));
// или
const swapChildren = ({ lastElementChild: el }) => el.previousElementSibling.before(el);
// или
const swapChildren = el => el.cells[1].after(el.cells[0]);
// или
const swapChildren = ({ cells: [ a, b ] }) => a.replaceWith(b, a);parents.forEach(swapChildren);
// или
for (const n of parents) {
swapChildren(n);
}
// или
for (let i = 0; i < parents.length; i++) {
swapChildren(parents[i]);
}
// или
(function next(i, n = parents.item(i)) {
n && (swapChildren(n), next(-~i));
})(0);
X = n => n ? (n & 1 ? '-chirp' : '') + X(n >> 1) + X(n >> 1) : ''
chirp = n => X(n).slice(1)
google.visualization.arrayToDataTable(data, true)
.el {
animation: blink 2s linear infinite;
background: #000;
}
.el:nth-child(1) { animation-delay: 0s; }
.el:nth-child(2) { animation-delay: 0.5s; }
.el:nth-child(3) { animation-delay: 1s; }
.el:nth-child(4) { animation-delay: 1.5s; }
@keyframes blink {
0%, 20% {
background: #000;
}
10% {
background: #F00;
}
}
function App() {
const [ items, setItems ] = useState([]);
const onItemClick = ({ target: { dataset: { id } } }) =>
setItems(items.filter(n => n !== +id));
const onAddNewClick = () =>
setItems([ ...items, 1 + Math.max(0, ...items) ]);
return (
<div>
{items.map(n => <button onClick={onItemClick} data-id={n}>#{n}</button>)}
<button onClick={onAddNewClick}>add</button>
</div>
);
}
data: () => ({
items: [ ... ], // массив данных
columns: 666, // количество колонок, на которые надо разбить items
}),
computed: {
columnItems() {
const { items, columns } = this;
const colSize = Math.ceil(items.length / columns);
return Array.from(
{ length: columns },
(n, i) => items.slice(i * colSize, (i + 1) * colSize)
);
},
},<ul v-for="col in columnItems">
<li v-for="n in col">{{ n }}</li>
</ul>
<img v-for="i in 5" :src="i > ratingValue ? whiteStar : blackStar">
Array
.from(document.querySelectorAll('.obj'))
.filter(n => n.querySelector('.who')?.innerText !== 'Я')
.forEach(n => console.log(n.innerText));
const itemSelector = 'здесь должен селектор элементов, которые надо переместить';
const containerSelector = 'а здесь - селектор контейнеров';
const chunkSize = 3;const $items = $(itemSelector);
$(containerSelector).append(i => $items.slice(i * chunkSize, (i + 1) * chunkSize));
// или
const $containers = $(containerSelector);
$(itemSelector).each((i, n) => $containers.eq(Math.floor(i / chunkSize)).append(n));document.querySelectorAll(containerSelector).forEach(function(n, i) {
n.append(...this.slice(i * chunkSize, -~i * chunkSize));
}, [...document.querySelectorAll(itemSelector)]);
// или
const containers = document.querySelectorAll(containerSelector);
for (const [ i, n ] of document.querySelectorAll(itemSelector).entries()) {
containers[i / chunkSize | 0]?.appendChild(n);
}
$('label > input').change(function() {
$(this).parent().toggleClass('active', this.checked);
});
functional: true,
render: (h, ctx) => h('div', Array(ctx.props.количествоПовторений).fill(ctx.slots().default)),
<option
v-for="(n, i) in options"
v-text="n"
v-bind="!i && { disabled: true, value: '' }"
></option><option disabled value="">выбирай!</option>
<option v-for="n in options">{{ n }}</option>