点击li ,父辈出现; 子级,子辈不出现. prevUntil ---> 前面多个, 截止到 截止元素 , prev([expr]) --> 前面一个.

要求:

　　1. 点击第一级   [1知识点] 的时候,  [1知识点] 前有 圆圈.

　　　　点击 第二级 [1-1知识点, 1-2知识点, 1-3知识点] 时 , [1知识点]出现 圆圈.

　　2. 点击 第一级[2知识点] 或者 第二级[2-1知识点, 2-2知识点]的时候,  [2知识点] 出现圆圈, [1知识点] 前 圆圈 隐藏.

---------------------------------------------------------------------------

html:

 <ul>

         <li date-level="0" onclick="changeDetails(1, this)">

                             <span class="circleChose hide">1</span>

             <span class="rightListContent">1知识点</span>
         </li>

             <li date-level="1" onclick="changeDetails(2, this)">

                 <span class="rightListContentSub">1-1知识点</span>
             </li>

             <li date-level="1" onclick="changeDetails(3, this)">

                 <span class="rightListContentSub">1-2知识点</span>
             </li>

             <li date-level="1" onclick="changeDetails(4, this)">

                 <span class="rightListContentSub">1-3知识点</span>
             </li>

             <li date-level="1" onclick="changeDetails(8, this)">

                 <span class="rightListContentSub">1-4知识点</span>
             </li>

         <li date-level="0" onclick="changeDetails(5, this)">

                             <span class="circleChose">2</span>

             <span class="rightListContent">2知识点</span>
         </li>

             <li date-level="1" onclick="changeDetails(6, this)">

                 <span class="rightListContentSub">2-1知识点</span>
             </li>

             <li date-level="1" onclick="changeDetails(7, this)">

                 <span class="rightListContentSub">2-2知识点</span>
             </li>

 </ul>

JavaScript:

     function changeDetails(knowledgeId, node)
     {
         // console.log($(node).attr('date-level'));

         //判断点击的是一级 还是二级.
         if ($(node).attr('date-level') == 0) {
             //显示当前节点
             if ($(node).find('.circleChose').hasClass('hide')) {
                 $(node).find('.circleChose').removeClass('hide');
             }

             //隐藏其他节点:
             $(node).siblings('li').each(function(index, el) {
                 if (!$(this).find('.circleChose').hasClass('hide')) {
                     $(this).find('.circleChose').addClass('hide');
                 }
             });
         } else {
             //二级:
             $(node).prevUntil("li[date-level = 0]");
             // console.log($(node).prevUntil("li[date-level = 0]"));
             //找到直到 data-level = 0 为止的所有选项.
             var tempList = $(node).prevUntil("li[date-level = 0]");

             if (tempList.length == 0) {
                 //当前是第一个子节点:
                 //显示当前节点
                 // console.log('222');
                 if ($(node).prev().find('.circleChose').hasClass('hide')) {
                     $(node).prev().find('.circleChose').removeClass('hide');
                 }

                 //隐藏其他节点:
                 $(node).prev().siblings('li').each(function(index, el) {
                     if (!$(this).find('.circleChose').hasClass('hide')) {
                         $(this).find('.circleChose').addClass('hide');
                     }
                 });
             } else {
                 // tempList.last().prev()
                 //显示当前节点
                 // console.log('333');
                 if (tempList.last().prev().find('.circleChose').hasClass('hide')) {
                     tempList.last().prev().find('.circleChose').removeClass('hide');
                 }

                 //隐藏其他节点:
                 tempList.last().prev().siblings('li').each(function(index, el) {
                     if (!$(this).find('.circleChose').hasClass('hide')) {
                         $(this).find('.circleChose').addClass('hide');
                     }
                 });

             }
         }

         getDetails(knowledgeId);
     }

对于  prevUtil(). :  查找 之前 的所有同辈 元素 , 不包括 自己  和 截止元素.

1 , 1-1, 1-2, 1-3, 1-4, 1-5, 2,  2-1,  2-2 :   注意: 1在最上边, 2 在最下面.  它们都是同级的.

如果是

1-1 .prevUntil(1)     ---->  返回的是空的.  length 为 0 .

1-2.  prevUntil(1)    ----> [1-1]

1-3 . prevUntil(1)    ------> [1-2,  1-1]   注意 查找的顺序 , 此时 1-2 是第一个.

1-5. prevUntil(1)   ------->  [1-4,  1-3,   1-2,   1-1]   注意: 1-4 是第一个, 因为 从底部 向上查找.

2-1  . prevUntil(2)   -----> 返回的是空的 : lenth 是 0

2-2 .prevUntil(2)   ------> [2-1]