Agregar clase al elemento ancestro en función de la existencia del elemento en la jerarquía

Question

Tengo un código de muestra a continuación

<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>

Si uno de los li tiene una clase active, ¿cómo puedo agregar también una clase active en el padre li o esta parte

<li class="treeview">

javascript jquery html css

1

Nardong Bagsik 24 sep. 2019 a las 06:48

Answer 1

No desea seleccionar ninguna li.active fuera de la jerarquía de árbol .treeview:

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

1

joshweir 24 sep. 2019 a las 04:21

Answer 2

Puede usar jquery para lograr esto. Encuentra el fragmento a continuación.

$('.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>

2

Nidhin Joseph 24 sep. 2019 a las 04:04

Answer 3

Si necesita toda la ascendencia treeview de un <li> activo para tener la clase .active, puede usar :has de jQuery:

$('.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>

Si solo necesita el treeview más cercano inmediatamente, puede usar .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>

2

Tyler Roper 24 sep. 2019 a las 04:11

Agregar clase al elemento ancestro en función de la existencia del elemento en la jerarquía

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript