javascript - 使用 javascript/Jquery 将类添加到父子孙列表项

Question

我正在尝试动态地将类添加到嵌套列表项，即使子项和孙项的数量发生变化。

示例嵌套项目如下所示:

• 父级:列表1
  • 子级:列表11
    • 孙子:list111
    • 孙子:list1112
  • 子级:列表12
    • 孙子:list121
    • 孙子:list122

问题是，如果我使用 ul li ul 添加类，它适用于所有子项和孙项。有没有办法分别为子、孙、曾孙等添加类？

$('ul li ul a').addClass('child')

ul li a {
  color:red
}

.child {
  color:green;
}

a {
  text-decoration:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Parent1
  <ul> 
    <li><a href="#">Grandparent</a>
      <div>
        <ul>
          <li>
            <a href="#">Child</a> 
            <div>
              <ul>
                <li> <a href="#">Child1</a> 
                  <ul><li><a href="#"> Grandchild11</a></li></ul>
                </li>
                
                <li> <a href="#">Child2</a>
                  <ul><li><a href="#">GrandChild21</a></li><li><a href="#">grandchild22</a></li></ul>
                </li>
              </ul>
            </div> 
          </li>
          
          <li>
            <a href="#"> Child2 </a>
            <ul><li><a href="#">GrandChild21</a></li><li><a href="#">grandchild22</a></li></ul>
          </li>
        </ul>
      </div> 
    </li>
  </ul>
</div> <!-- Parent1 -->

<div>Parent2
  <ul> 
    <li>
      <a href="#">Grandparent</a>
      <div>
        <ul>
          <li>
            <a href="#">Child</a> 
            <div>
              <ul>
                <li>
                  <a href="#">Child1</a> 
                  <ul><li><a href="#"> Grandchild11</a></li></ul>
                </li>
                
                <li>
                  <a href="#">Child2</a>
                  <ul><li><a href="#">GrandChild21</a></li><li><a href="#">grandchild22</a></li></ul>
                </li>
              </ul>
            </div> 
          </li>
          
          <li>
            <a href="#"> Child2 </a>
            <ul><li><a href="#">GrandChild21</a></li><li><a href="#">grandchild22</a></li></ul>
          </li>
        </ul>
      </div> 
    </li>
  </ul>
</div> <!-- Parent2 -->

Answer 1

您需要的是直接子级的 CSS 选择器 ( > )，以便指定您要定位的元素级别。您可以将 jQuery 更改为如下所示:

// $('ul li ul a').addClass('child')

var parent = 'ul > li';
var child = ' > div > ul > li';

// to target the child
$(parent + child + ' > a').addClass('child');
// to target the grandchild
$(parent + child + child + ' > a').addClass('grandchild');
// to target the great grandchild
$(parent + child + child + child + ' > a').addClass('greatgrandchild');

a {
  text-decoration:none;
}
ul li a {
  color:red
}
.child {
  color:green;
}
.grandchild {
  color:orange;
}
.greatgrandchild {
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Grandparent 1
  <ul> 
    <li>
      <a href="#">Parent</a>
      <div>
        <ul>
          <li>
            <a href="#">Child 1</a> 
            <div>
              <ul>
                <li>
                  <a href="#">Grandchild 1-1</a>
                  <div>
                    <ul><li><a href="#">Great Grandchild 1-1-1</a></li></ul>
                  </div>
                </li>
                
                <li>
                  <a href="#">Grandchild 1-2</a>
                  <div>
                    <ul>
                      <li><a href="#">Great Grandchild 1-2-1</a></li>
                      <li><a href="#">Great Grandchild 1-2-2</a></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div> 
          </li>
          
          <li>
            <a href="#">Child 2</a>
            <div>
              <ul>
                <li><a href="#">Grandchild 2-1</a></li>
                <li><a href="#">Grandchild 2-2</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </div> 
    </li>
  </ul>
</div> <!-- Grandparent 1 -->

<div>Grandparent 2
  <ul> 
    <li>
      <a href="#">Parent</a>
      <div>
        <ul>
          <li>
            <a href="#">Child 1</a> 
            <div>
              <ul>
                <li>
                  <a href="#">Grandchild 1-1</a> 
                  <div>
                    <ul><li><a href="#"> Great Grandchild 1-1-1</a></li></ul>
                  </div>
                </li>
                
                <li>
                  <a href="#">Grandchild 1-2</a>
                  <div>
                    <ul>
                      <li><a href="#">Great Grandchild 1-2-1</a></li>
                      <li><a href="#">Great Grandchild 1-2-2</a></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div> 
          </li>
          
          <li>
            <a href="#"> Child 2</a>
            <div>
              <ul>
                <li><a href="#">Grandchild 2-1</a></li>
                <li><a href="#">Grandchild 2-2</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </div> 
    </li>
  </ul>
</div> <!-- Parent2 -->

IMPORTANT The above code will work as long as your nested elements have a uniform "pattern". If in any case they don't have, you can simply modify the value for var child, or add another one with a different value. For example:

var parent = 'ul > li';
var child = ' > div > ul > li'; /*ul enclosed in div*/
var grandchild = ' > ul > li'; /*ul not enclosed in div*/

// to target the grandchild
$(parent + child + grandchild + ' > a').addClass('grandchild');

Here's a working demo in JSFiddle, as well.