jQuery 在每个循环中添加元素

Question

在尝试向包含特定 class 的每个元素添加切换按钮时，我对 jQuery 感到有点头疼。当我使用 jQuery 的 .each( 时，我希望在循环中添加我的标识符 class。但不知何故，它一直将我的 html 代码循环附加到每个 li 而不是 li.has-children

这是我当前的代码：

    function addLevelClass($parent, level) {
      // fetch all the li's that are direct children of the ul
      var $children = $parent.children('li');
      // loop trough each li
      $children.each(function() {
        // get the ul that is a direct child of the li
        var $sublist = $(this).children('ul');
        // if an ul was found
        if ($sublist.length > 0) {
          $sublist.addClass('slideable-submenu');
          // add a class to the current li indicating there is a sub list
          $(this).addClass('has-children level-'+level);


          //last attempt before ask on SO
          if( $(this).hasClass('has-children level-'+level) ){
            $( 'li.has-children span a' ).after( '<span class="sub-menu-toggle"></span>');
          }

          // repeat the process for the sublist, but with the level one higher
          // = recursive function call
          addLevelClass($sublist, level+1);
        }
      });
    }

    // call the function to add level classes on the upper most ul
    addLevelClass($('.header-mobile-menu'), 0);
    //$( 'li.has-children span a' ).after( '<span class="sub-menu-toggle"></span>');//Adds toggle buttons everywhere

所以思路是得到：

$( 'li.has-children span a' ).after( '<span class="sub-menu-toggle"></span>');

位置正确。

Answer 1

如果我理解正确的话，您正在尝试为每个具有子菜单的 <li> 添加一个切换按钮。

如果是这样，我创建了一个 fiddle，其中包含一些可能有用的通用标记。

我所做的唯一真正的改变是切换按钮的附加方式，我删除了递归回调本身。

这是更新后的代码：

function addLevelClass($parent, level) {

      // fetch all the li's that are direct children of the ul
      var $children = $parent.children('li');

      // loop trough each li
      // here I added a check if level is defined, if not set it to 0, this way you don't have to pass it a value unless you want to start it somewhere
      var level = (typeof(level) !== 'undefined') ? level : 0;
      $children.each(function() {
        // get the ul that is a direct child of the li
        var $sublist = $(this).children('ul');
        // if an ul was found
        if ($sublist.length > 0) {


          $sublist.addClass('slideable-submenu');

          // add a class to the current li indicating there is a sub list
          $(this).addClass('has-children level-'+level).find('span:first').append( '<span class="sub-menu-toggle">toggle</span>');

          // increment level
          level++;

        }
      });
    }

    // call the function to add level classes on the upper most ul
    addLevelClass($('#parent ul'));
    //$( 'li.has-children span a' ).after( '<span class="sub-menu-toggle"></span>');//Adds toggle buttons everywhere

jQuery 在每个循环中添加元素

jQuery add element in each loop

jquery

each