const className = 'class';
const index = 1;
const element = document.querySelector(`.${className}:nth-child(${index + 1})`);
const element = document.querySelectorAll('.' + className)[index];
// или
const element = document.getElementsByClassName(className).item(index);
есть пример локализации, но он по структуре элементов не похож на мой пример поэтому у меня не получается им воспользоваться
map.setBounds(map.geoObjects.getBounds())
function f({ a, b, c }) {
console.log(a, b, c);
}
f({ b: 9, c: 5 }); // undefined 9 5
function f({ a = 1, b = 2, c = 3 } = {}) {
console.log(a, b, c);
}
f({ a: 100, c: 300 }) // 100 2 300
f({ b: -1 }) // 1 -1 3
f() // 1 2 3
f({ a: 0, b: 0, c: 0 }) // 0 0 0
&:hover + .block .circle-1
&:hover ~ .block .circle-1
.hover {
...
.text {
...
$hover-colors: red, green, blue;
@for $i from 1 through length($hover-colors) {
&:nth-child(#{$i}):hover ~ .block .circle:nth-child(#{$i}) {
background: nth($hover-colors, $i);
}
}
onMouseDown(e) {
e.preventDefault();
}
onMouseDown={this.onMouseDown}
Почему выдает фрагмент слова?
\b
, обозначающий границы слов, но он в данном случае неприменим, поскольку у вас тут кириллические символы. Можно представить границу слова как начало строки или пробельный символ или конец строки. Типа так:str.match(/(^|\s)[бвгджзк][аяеэюуёоиы]+[бвгджзк][а-яё]*($|\s)*?/gi).map(n => n.trim())
function getMinSum(arr, n) {
let sum = 0;
let minSum = 0
let index = 0;
for (let i = 0; i < n; sum += arr[i++]) ;
minSum = sum;
for (let i = n; i < arr.length; i++) {
sum -= arr[i - n] - arr[i];
if (sum < minSum) {
minSum = sum;
index = i - n + 1;
}
}
return {
sum: minSum,
seq: arr.slice(index, index + n),
};
}
onClick={ this.setState({isOpen: !this.state.isOpen}) }
todos: [
{ open: false, ... },
{ open: false, ... },
...
],
@click="todo.open = !todo.open"
:class="{ 'dropdown-active': todo.open }"
function transfer(from, to) {
$(from).on('click', 'button', function(e) {
const $el = $(e.target).parent();
const index = +$el.data('index');
const indices = $('li', to).get().map(n => +n.dataset.index);
if (index < indices[0] || !indices.length) {
$(to).prepend($el);
} else if (index > indices[indices.length - 1]) {
$(to).append($el);
} else {
$(`${to} [data-index="${indices.filter(n => n < index).pop()}"]`).after($el);
}
});
}
transfer('#parent1', '#parent2');
transfer('#parent2', '#parent1');
<div class="box">
<div class="inbox1"></div>
<div class="inbox2"></div>
</div>
.box {
display: flex;
}
.inbox1,
.inbox2 {
width: 100px;
height: 100px;
border-radius: 100%;
transition: all 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.inbox1 {
background: red;
transition-delay: 0ms;
}
.inbox2 {
background: green;
transition-delay: 200ms;
}
.box:hover .inbox1 {
transform: translate(200px, 0);
transition-delay: 200ms;
}
.box:hover .inbox2 {
transform: translate(200px, 0);
transition-delay: 0ms;
}
Обращался к API в componentDidMount() и отправлял в стейт, но это вызывает перерендеринг компонента и в доках считается нежелательно.
You should populate data with AJAX calls in the componentDidMount lifecycle method. This is so you can use setState to update your component when the data is retrieved.