Как получить блок по классу и 2 последующих и предыдущих от него?

Question

.container .container__inner {
     padding: 15px;
     color: purple;
     background-color: silver;
     margin-bottom: 5px;
}
 .container .container__inner._active {
     background-color: black;
     color: red;
}
 .container .container__inner._modify {
     color: aqua;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
    <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
    <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
    <div class="container__inner _active">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
    <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
    <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
    <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
  </div>
</body>
</html>

Можно ли как-то получить блок .container__inner._active и после этого дать ему и предыдущим двум, а так же двум последующим блокам дополнительно класс .modify?

Answer 1

let active = $('.container__inner._active');
let res = [active.prev(), active.prev().prev(), active, active.next(), active.next().next()];

res.forEach(el => {
  el.addClass('_modify');
})

.container .container__inner {
     padding: 15px;
     color: purple;
     background-color: silver;
     margin-bottom: 5px;
}
 .container .container__inner._active {
     background-color: black;
     color: red;
}
 .container .container__inner._modify {
     color: aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
    <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
    <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
    <div class="container__inner _active">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
    <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
    <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
    <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
  </div>
</body>
</html>

Answer 2

var $active = $("._active"), $prev = $active.prev(), $next = $active.next()
$([$prev.prev()[0], $prev[0], $active[0], $next[0], $next.next()[0]]).addClass('_modify')

.container .container__inner {
     padding: 15px;
     color: purple;
     background-color: silver;
     margin-bottom: 5px;
}
 .container .container__inner._active {
     background-color: black;
     color: red;
}
 .container .container__inner._modify {
     color: aqua;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="container">
  <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
  <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
  <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
  <div class="container__inner _active">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
  <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
  <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
  <div class="container__inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quo deserunt voluptas at voluptatem et sed, necessitatibus adipisci optio saepe ut nam ducimus architecto placeat molestias consequuntur, quas ea earum.</div>
</div>

БЛОГ НА HUSL

Как получить блок по классу и 2 последующих и предыдущих от него?

Ответы (2 шт):