主页 / 问题 / 724738
Accepted
Pavel8289
Asked:2020-09-29 20:37:14 +0000 UTC2020-09-29 20:37:14 +0000 UTC

给列表编号

  • 772

有一个清单，你需要给它编号。编号意味着添加类：在级别 2ul中，例如，сlass_2在级别 3 ul-сlass_3中。它应该是这样的。

我认为解决方案在于 jQuery，但我不知道该怎么做。

<ul  class="class_1">
   <li>
      <ul class="class_2">
         <li></li>
         <li>
            <ul class="class_3">
               <li></li>
               <li></li>
               <li></li>
               <li></li>
            </ul>
         </li>
         <li></li>
         <li></li>
         <li></li>
      </ul>
   </li>
   <li>
      <ul class="class_2">
         <li></li>
         <li>
            <ul class="class_3">
               <li></li>
               <li></li>
               <li></li>
               <li></li>
            </ul>
         </li>
         <li>
            <ul class="class_3">
               <li></li>
               <li></li>
               <li></li>
               <li></li>
            </ul>
         </li>
         <li>
            <ul class="class_3">
               <li></li>
               <li></li>
            </ul>
         </li>
         <li></li>
      </ul>
   </li>
   <li></li>
</ul>
jquery

2 个回答

  1. Best Answer

    例如，所以

    function setClass(AList) {
  var level = AList.data('level');
  if (level)
    return level;
  var parent = $(AList.parent().closest('ul'));
  if (parent.length)
    var level = setClass(parent) + 1;
  else
    var level = 1;
  AList.addClass('class_' + level).data({level: level});
  return level;
}

$('ul:not(:has(ul))').each(function() {
  setClass($(this));
});
    .class_1 {
  background-color: red;
}

.class_2 {
  background-color: green;
}

.class_3 {
  background-color: blue;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li>
      <ul>
         <li></li>
         <li>
            <ul>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
            </ul>
         </li>
         <li></li>
         <li></li>
         <li></li>
      </ul>
   </li>
   <li>
      <ul>
         <li></li>
         <li>
            <ul>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
            </ul>
         </li>
         <li>
            <ul>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
            </ul>
         </li>
         <li>
            <ul>
               <li></li>
               <li></li>
            </ul>
         </li>
         <li></li>
      </ul>
   </li>
   <li></li>
</ul>

    主意：

    • 首先选择所有没有子列表的列表$('ul:not(:has(ul))')。
    • 然后，对于这些列表中的每一个，我们递归地查找父列表以找出我们所处的级别。
    • 我们保存所有计算的级别，以免为同一元素计算两次
    • 3

  2. 在为第一个 ul-a 设置类之后，只需遍历每个 ul-a 的所有第一个孩子就足够了。

    https://jsfiddle.net/lermon333/ep9wh2v9/

    var index = 1;
var first = $('ul').first();
first.addClass(index + "_class");
index += 1;
setClass(first, index);

function setClass(parent, index) {
  firstUlChilds = parent.find(">li>ul");
  firstUlChilds.addClass(index + "_class");
  index += 1;
  if (firstUlChilds.length) {
    firstUlChilds.each(function(i, el){
      setClass($(el), index);
    })
  }
}
    • 2

相关问题