Question

如果存在.has_children，我需要移入UL元素并更改LI和子UL类。见这个例子：

<ul class="nav navbar-nav">
    <li class="first current parent">Link1</li>
    <li class="parent">Link2</li>
    <li class="has_children parent"><a href="#">Link3</a>
        <ul class="dropdown">
            <li class="first parent">SubItem1</li>
            <li class="last parent">SubItem2</li>
        </ul>
    </li>
</ul>

当我找到has_children时，我应该只在父级或根LI中按dropdown进行更改。然后，对于dropdown，应更改具有has_children父级的dropdown-menu dropdown-megamenu类的UL。这需要迭代直到最新的嵌套级别。结果应该是这样的：

<ul class="nav navbar-nav">
    <li class="active">Link1</li>
    <li class="">Link2</li>
    <li class="dropdown"><a href="#" data-close-others="true" data-hover="dropdown" data-toggle="dropdown" class="dropdown-toggle" >Link3</a>
        <ul class="dropdown-menu dropdown-megamenu">
            <li>SubItem1</li>
            <li>SubItem2</li>
        </ul>
    </li>
</ul>

我尝试使用此代码移动元素内部：

$.each("ul.nav > li"), function(index, element) {
    console.log($(this).text());
}

但是没有用，可以给我一些帮助或推动吗？

Answer 1

我不确定我是否做对了。但我认为我很接近。尝试使用像这个递归函数的一些思考：

$(function(){
    doIt( $('li', '.nav') );
});

var doIt = function($element){
    $e = $element || null;
    $e.each(function(){
        if( $(this).hasClass('has_children') ){
            $(this).attr('class', 'dropdown');
            $(this).children().attr('class', 'dropdown-menu dropdown-megamenu').children().each(function(){
                $(this).removeAttr('class');
            });
        }
    });
    this($e.next());
};

jsFiddle here

Answer 2

如果我已正确理解了这个问题，你想要更改所有的classNames，如果是这种情况而不是使用>（ child ）选择器，你可以使用后代选择器：< / p>

$("ul.nav li").each(function (index, element) {
    var $this = $(this),
        cls = '';

    if ($this.hasClass('current')) 
    {
        cls = 'active';
    } 
    else if ($this.hasClass('has_children')) 
    {
        cls = 'dropdown';
        $this.children('.dropdown')
             .attr('class', 'dropdown-menu dropdown-megamenu')
             .end()
             .children('a')
             .attr({
                'data-close-others': 'true',
                'data-hover'       : 'dropdown',
                'data-toggle'      : 'dropdown',
                'class'            : 'dropdown-toggle' 
             });
    } 

    $this.attr('class', cls);
});

请注意，我已使用attr方法重置了class属性的值，如果要添加/删除某些classNames，可以使用addClass / {{1}而是方法。

如果有.has_children类，则在UL内部移动并更改LI类

2 个答案: