Добавление div в определенных областях в неупорядоченном списке

Question

Добавление div в определенных областях в неупорядоченном списке

0

В настоящее время у меня есть стандартный неупорядоченный список, который действует как меню аккордеона для моей навигации по сайту (здесь моя разметка в полном объеме). Я хочу предоставить более совершенную навигацию для браузеров, которые поддерживают новые функции, которые я буду использовать (css 3d transforms). Чтобы это сработало, мне нужно немного изменить структуру моего кода, чтобы он соответствовал выводам следующих элементов (например, добавить/клонировать элементы в структуру):

<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
<div class="mp-level"> <!--NEW APPENDED ELEMENT-->
    <ul id="demo1" class="nav">
        <li>
            <a href="#">Devices</a>
            <div class="mp-level">
                <h2>Devices</h2> <!--NEW CLONED ELEMENT-->
                <a class="mp-back" href="#">back</a> <!--NEW APPENDED ELEMENT-->
                <ul>
                    <li><a href="#">Mobile Phones</a></li>
                    <li><a href="#">Televisions</a></li>
                    <li><a href="#">Cameras</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a href="#">Magazines</a>
            <div class="mp-level">
                <h2>Magazines</h2> <!--NEW CLONED ELEMENT-->
                <a class="mp-back" href="#">back</a> <!--NEW APPENDED ELEMENT-->
                <ul>
                    <li><a href="#">National Geographic</a></li>
                    <li><a href="#">Scientific American</a></li>
                </ul>
            </div>
        </li>
</ul>
</div>
</nav>

Я хочу добавить новые элементы, если это возможно, но это не работает корректно:

$( "#mp-menu" ).append('<div class="mp-level">');

Чтобы клонировать ссылку уровня 1 в H2, я пробовал, но не повезло:

$( "#mp-menu ul li .mp-level" ).clone('<h2>Devices</h2>');

egr103 23 окт. 2013, в 12:22

Источник

0

немного запутался .. можете ли вы показать нам, каким должен быть ваш конечный результат?
bipen 23 окт. 2013, в 10:04
0

@bipen Исходный код, который у меня есть, это ссылка на pastebin, но код в моем вопросе - это результат, который я хочу. Смотрите комментарии, определяющие элементы, которые мне нужны, добавлены / клонированы
egr103 23 окт. 2013, в 10:07

Теги:

javascript

jquery

dom

append

clone

1 ответ

Ещё вопросы

немного запутался .. можете ли вы показать нам, каким должен быть ваш конечный результат?
@bipen Исходный код, который у меня есть, это ссылка на pastebin, но код в моем вопросе - это результат, который я хочу. Смотрите комментарии, определяющие элементы, которые мне нужны, добавлены / клонированы

Arun P Johny · Accepted Answer · 2013-10-23T07-57-00.000Z

.append() не совпадает с конкатенацией строк, где вы можете просто добавить бит и фрагменты строк в структуру dom.

Для первой части вы можете использовать .wrapInner()

$('#mp-menu').wrapInner('<div class="mp-level" />');

Для второй части используйте ниже .prepend()

$( "#mp-menu ul li .mp-level" ).prepend(function(){
    return '<h2>' + $(this).prev().text()+ '</h2> <a class="mp-back" href="#">back</a>';
})

Демо: скрипка

Это замечательно, однако мне нужно вставить DIV с именем класса .mp-level, чтобы обернуть вокруг каждого второго уровня UL и недавно вставленные H2 и обратные ссылки (если они существуют). Как я могу отредактировать ваш ответ, чтобы сделать это?
Вы говорите, что <a href="#">Magazines</a> <div class="mp-level"> нет в исходном html
Вы имеете в виду, как jsfiddle.net/arunpjohny/z5nPM/3
Ссылки присутствуют (например, <a href="#"> Журналы </a>), но <div class = "mp-level"> нет. Твоя вторая скрипка прибила его. Спасибо!