Изменение цвета li в конкретном ul

Question

есть задача на смену цвета li в ul, но только в конкретном ul, при нажатии на li в другом ul, старый li не затерался. Как это реализовать без id или с id, так как UL выводятся через цикл и их может быть не ограниченное множество.

  -----------<HTML>-------------- 

<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

<ul class="list">
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>

-----------<HTML>-------------- 

-----------<style>--------------

li{cursor: pointer;}
li.active{color: red;}

-----------<style>--------------

-----------<JS, Jquery>-------------- 

$('.list').on('click', 'li', function(){
$('.list li').removeClass('active');
$(this).addClass('active');
});

-----------<JS, Jquery>--------------

Answer 1

Такое?

$('.list').on('click', 'li', function() {
    $(this).closest('.list').find('li').removeClass('active');
    $(this).addClass('active');
});

li {
  cursor: pointer;
}

li.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul class="list">
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

или такое?

$('.list').on('click', 'li', function() {
   // $(this).closest('.list').find('li').removeClass('active');
    $(this).addClass('active');
});

li {
  cursor: pointer;
}

li.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul class="list">
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

БЛОГ НА HUSL

Изменение цвета li в конкретном ul

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