Добавить класс к элементу-предку в зависимости от наличия элемента в иерархии

Question

У меня есть пример кода ниже

<li class="treeview">
 <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
 <span class="pull-right-container">
 <i class="fa fa-angle-left pull-right"></i>
 </span>
 </a>
 <ul class="treeview-menu">
    <li class="active"><a href="#">Link in level 2</a></li>
    <li><a href="#">Link in level 2</a></li>
 </ul>
</li>

Если у одного из li есть класс active, как я могу также добавить класс active в родительский элемент li или эту часть?

<li class="treeview">

Answer 1

Если вам нужен весь treeview родословной активного <li>, чтобы иметь класс .active, вы можете использовать jQuery's :has:

$('.treeview:has(li.active)').addClass('active');

$('.treeview:has(li.active)').addClass('active');

.active::before {content: 'Active - '}

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

Если вам нужен только ближайший treeview, вы можете использовать .closest():

$('.treeview li.active').closest(".treeview").addClass('active');

$('.treeview li.active').closest(".treeview").addClass('active');

.active::before {content: 'Active - '}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="treeview">1
    <ul>
      <li class="treeview">2
        <ul>
          <li class="treeview">3
            <ul>
              <li class="active">4 (Active)</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="treeview">1
    <ul>
      <li class="treeview">2
        <ul>
          <li class="treeview">3
            <ul>
              <li>4</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="treeview">1
    <ul>
      <li class="treeview">2
        <ul>
          <li class="treeview">3
            <ul>
              <li>4</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 2

Вы можете использовать jquery для достижения этой цели.Пожалуйста, найдите фрагмент ниже.

$('.treeview-menu li').on('click', function() {
  $(this).addClass('active');
  $(this).closest('li.treeview').addClass('active');
})

.active>a {
  color: green;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<ul>
  <li class="treeview">
    <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
 <span class="pull-right-container">
 <i class="fa fa-angle-left pull-right"></i>
 </span>
 </a>
    <ul class="treeview-menu">
      <li class=""><a href="#">Link in level 2</a></li>
      <li><a href="#">Link in level 2</a></li>
    </ul>
  </li>
</ul>

Answer 3

Вы не хотите выбирать какие-либо li.active вне иерархии дерева .treeview:

$('.treeview li.active').closest('.treeview').addClass('active');