WP_NAV_MENU，是否将类添加到每n个项目？

时间：2011-07-13 作者：v3nt

有没有一种方法可以使用wp\\u nav\\u menu将类添加到菜单中的每个第n项？

正在尝试创建列，但需要将“last”类添加到第3项。

干杯Dc公司

4 个回复

最合适的回答,由SO网友:v3nt 整理而成

最终还是这样工作的。。。

function add_nthclass($items, $args){

  $scb = get_object_vars($args);

  switch($scb[\'menu\']) {

        case \'mainpages\':
            $nth = 2;
            $items = explode(\'</li>\',$items);
            $newitems = array();
              // loop through the menu items, and add the new link at the right position
              foreach($items as $index => $item)                  {

                if(($index+1) % $nth == 0){
                    $newitems[] =  str_replace(\'class="\', \'class="last \', $item);
                }else{                      
                $newitems[]= $item;                 
                }
              }
              // finally put all the menu items back together into a string using the ending <li> tag and return
              $newitems = implode(\'</li>\',$newitems);

        case \'footer\':
         // footer menu nth funcs...
        default:

            $newitems = $items;

    } // End switch

    return $newitems;    
}    
add_filter(\'wp_nav_menu_items\', \'add_nthclass\', 10, 2);

SO网友:mike23

您可以使用jQuery来实现这一点。在标题中尝试以下操作：

$(document).ready(function() {
    $("#mymenu li:nth-child(3n+3)").addClass("last");
});

Note : 要想让它发挥作用，你需要enqueued jQuery.

SO网友:Chris_O

Nth已经是一个类了，它是一个伪类

为什么不更改应用于.last 并将其应用于#nav li:nth-child(3). 如果您需要针对每三个菜单项#nav li:nth-child(3n+3)

编辑：

哦，是啊，我忘了提到对这些的支持pesky stone age browsers.

幸运的是，有一些很好的javascript库和jQuery插件为IE添加了css3支持<；9

SO网友:ptriek

如果您只想添加类.last 对于最后一个菜单项，这是一种更短的方法：

/**********************************************************/
/* add .last to last menu item                            */
/**********************************************************/

add_filter(\'wp_nav_menu\', \'add_last\');

function add_last($output) {
  $output = substr_replace($output, \'class="last menu-item\', strripos($output, \'class="menu-item\'), strlen(\'class="menu-item\'));
  return $output;
};

如果您还有子菜单，则可以使用以下代码（感谢this article).

add_filter(\'wp_nav_menu\', \'add_last\');

function add_last($menuHTML) {
  $last_items_ids  = array();
  // Get all custom menus
  $menus = wp_get_nav_menus();
  // For each menu find last items
  foreach ( $menus as $menu_maybe ) {
    // Get items of specific menu
    if ( $menu_items = wp_get_nav_menu_items($menu_maybe->term_id) ) {
      $items = array();
      foreach ( $menu_items as $menu_item ) {
        $items[$menu_item->menu_item_parent][] .= $menu_item->ID;
      }
      // Find IDs of last items
      foreach ( $items as $item ) {
        $last_items_ids[] .= end($item);
      }
   }
}
  foreach( $last_items_ids as $last_item_id ) {
    $items_add_class[] .= \' menu-item-\'.$last_item_id;
    $replacement[]     .= \' menu-item-\'.$last_item_id . \' last\';
  }
  $menuHTML = str_replace($items_add_class, $replacement, $menuHTML);
  return $menuHTML;
};

结束

小码农CODE

WP_NAV_MENU，是否将类添加到每n个项目？

Nth已经是一个类了，它是一个伪类

编辑：

相关推荐

Menu API not switching menus?