javascript - 如果子 LI 包含特定类，则将类应用于父 UL

Question

我目前正在开发一个侧边菜单，它将列出相关部分中的所有页面。除了一件小事，我几乎已经把它分类了。我们有 2 级下拉菜单，这意味着有很多链接。

事件的 LI 将具有 .current_page_item 类。我正在尝试找出一种说法: 如果 UL 有一个包含 .current_page_item 类的子 LI，则将 .side_open 类应用于 UL。

$(document).ready(function(){
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Demo 1
    <ul>
      <li class="current_page_item">Demo 11</li>
    </ul>
  </li>
  <li>Demo 2
    <ul>
      <li>Demo 21</li>
    </ul>
  </li>
  <li>Demo 3
    <ul>
      <li>Demo 31</li>
    </ul>
  </li>
  <li>Demo 4
    <ul>
      <li>Demo 41</li>
    </ul>
  </li>
</ul>

如果有人对如何做到这一点有任何想法，我们将不胜感激!

Answer 1

据我了解，如果选择了 li，您希望为直接父级设置样式。 (如果我错了请评论我)

所以，下面应该是你想要实现的:
(用一些 Javascript 完成)

$(document).ready(function() {
  $('ul>li>ul>li').each(function() {
    if ($(this).hasClass('current_page_item')) {
      $(this).parent().addClass('side_open');
    }
  });
});

.side_open {
  background: #ddd;
}

.current_page_item {
  background: #bbb;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Demo 1
    <ul>
      <li class="current_page_item">Demo 11</li>
    </ul>
  </li>
  <li>Demo 2
    <ul>
      <li>Demo 21</li>
    </ul>
  </li>
  <li>Demo 3
    <ul>
      <li>Demo 31</li>
    </ul>
  </li>
  <li>Demo 4
    <ul>
      <li>Demo 41</li>
    </ul>
  </li>
</ul>