Question

我有一个嵌套的html列表，简化就像这样

 <ul>
<li class="level1 main1">Main 1
    <ul>
        <li class="level2 block1">Block 1
            <ul>
                <li class="level3 item1">Item 1</li>
                <li class="level3 item2">Item 2</li>
                <li class="level3 item3">Item 3</li>
            </ul>
        </li>
        <li class="level2 block2">Block 2
            <ul>
                <li class="level3 item1">Item 1</li>
                <li class="level3 item2">Item 2</li>
                <li class="level3 item3">Item 3</li>
            </ul>
        </li>
    </ul>
</li>
<li class="level1 main2">Main 2
    <ul>
        <li class="level2 block1">Block 1
            <ul>
                <li class="level3 item1">Item 1</li>
                <li class="level3 item2">Item 2</li>
                <li class="level3 item3">Item 3</li>
            </ul>
        </li>
        <li class="level2 block2">Block 2
            <ul>
                <li class="level3 item1">Item 1</li>
                <li class="level3 item2">Item 2</li>
                <li class="level3 item3">Item 3</li>
            </ul>
        </li>
    </ul>
</li>
 </ul>

Level3 Item元素实际上是一个小任务，当它完成后，Glyphicon会像这样添加

 <li class="level3 item1">Item 1 <span class="glyphicon glyphicon-ok"></span></li>

但我需要的是当完成所有三个任务（任务数量可能不同）时，应该将相同的glyphicon添加到此Level2 Block。并且当完成所有块时（块的数量可能不同） - 应该将相同的glyphicon添加到此Level1 Main。我想我应该检查所有Block - Item元素是否都有glyphicon，并且所有Main-Block元素都相同，但我没有这样做。

Answer 1

你需要这样的jQuery脚本，没有所有的控制台调用：

function checkForCompletion() {

  // There are two of these and we have to check both.
  $( '.level2.block2' ).each( function( i ){
    var complete = true;
    var parent = this;

    // Check for the absence of a span.
    $( this ).find( 'li' ).each( function( i2) {
      if( !$( this ).find( 'span' ).length ) {
        console.log( 'Index ' + i2 + ' is incomplete.' );

        // If any of the tasks lacks a span then the task is not complete.
        complete = false;
      } else {
        console.log( 'Index ' + i2 + ' is complete.' );
      }
    });

    // If complete flag has not been reset write the parent's span.
    if( complete === true ){
      console.log( 'Tasks for index ' + i + ' are complete.' );
      var span = $( '<span></span>' );
      span.addClass( 'glyphicon glyphicon-ok' ).prependTo( parent );
    } else {
      console.log( 'Tasks for index ' + i + ' are not complete.' );
    } 
  }); 
 }

请点击此处：http://codepen.io/SteveClason/pen/eZoXxr

检查其他图层需要额外的循环 - 这只会检查两个<ul>和“class = level2 block2”。

嵌套的html列表，标记完成练习

1 个答案: