Question

我正在尝试编写一个将两个孩子ul#level_2组合在一起的函数，并将其附加到下拉列表li#level_1中的父#navigation。

我目前有以下工作，但这意味着我必须手动定位每个类别。我确信用很少的代码产生相同结果的方法要短得多。

$('li#furniture ul.level_2').children('li').appendTo('li#furniture ul.level_2:first');
$('li#furniture ul.level_2').children('li').not(':first').remove();

这是我当前的html结构的缩短版本＆amp;以下是理想的结果：

简单当前HTML

<div id="navigation">
    <ul id="level_1">
        <li class="level_1">
            <div class="subnav_wrapper">
                <ul class="level_2">
                    <li class="level_2">
                        <a href="#">Link A</a>
                    </li>
                </ul>   
                <ul class="level_2">
                    <li class="level_2">
                        <a href="#">Link B</a>
                    </li>
                </ul>           
            </div>
        </li>
    </ul>
</div>

欲望HTML

   <div id="navigation">
        <ul id="level_1">
            <li class="level_1">
                <ul class="level_2">
                    <li class="level_2">
                        <a href="#">Link A</a>
                    </li>
                    <li class="level_2">
                        <a href="#">Link B</a>
                    </li>
                </ul>               
            </li>
        </ul>
    </div>

完整详细的HTML

<div id="navigation">
    <ul id="level_1">
        <li class="level_1 furniture">
            <a href="#">Furniture</a>
            <div class="subnav_wrapper">
                <ul class="level_2">
                    <li class="level_2 sofa">
                        <a href="#">Sofa</a>
                    </li>
                </ul>   
                <ul class="level_2">
                    <li class="level_2 bed">
                        <a href="#">Bed</a>
                    </li>
                </ul>           
            </div>
        </li>
        <li class="level_1 bathroom">
            <a href="#">Bathroom</a>
            <div class="subnav_wrapper">
                <ul class="level_2">
                    <li class="level_2 shower">
                        <a href="#">Shower/a>
                    </li>
                </ul>   
                <ul class="level_2">
                    <li class="level_2 bath">
                        <a href="#">Bath</a>
                    </li>
                </ul>           
            </div>
        </li>
    </ul>
</div>

Answer 1

这应该做你需要的。

var wrapper = $(".subnav_wrapper").contents();

$(".subnav_wrapper").replaceWith(wrapper );

$('ul.level_2').children('li').appendTo('ul.level_2:first');
$('ul.level_2').not(':first').remove();

JSFIDDLE DEMO

结合导航UL jQuery功能

1 个答案: