代码之家 › 专栏 › 技术社区 › Nardong Bagsik

基于层次结构中元素的存在向祖先元素添加类

css html jquery javascript

Nardong Bagsik · 技术社区 · 6 年前

我下面有一个示例代码

<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 我怎样才能添加一个类 积极的 在父母身上 锂 或者这部分

<li class="treeview">

3 回复 | 直到 6 年前

joshweir Raveena 6 年前

你不想选择任何 li.active 在 .treeview 树层次结构:

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

Nidhin Joseph 6 年前

您可以使用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>

Tyler Roper 6 年前

如果你需要整个 treeview 活跃分子的祖先 <li> 上课 .active ,您可以使用jquery的 :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>

如果你只需要最接近的 控件 ,您可以使用 .closest() :

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

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

.active::在{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>