Добавить текст innerHTML родительского узла в дочерний узел - PullRequest
Новая
       28

Добавить текст innerHTML родительского узла в дочерний узел

0 голосов
/ 11 июня 2011

У меня есть некоторая навигация по jQuery, и я хотел бы добавить родительский якорь к дочернему ul в раскрывающемся списке, чтобы это: 

 <li class="parentUl">
    <a class="parentLink" href="somewhere">Parent Link</a>
    <ul class="childUl">
        <li class="childUl">
            <a class="childLink">Child Link</a>
        </li>
    </ul>
</li>

становится таким: 

<li class="parentUl">
  <a class="parentLink" href="somewhere">Parent Link</a>
  <ul class="childUl">
  **<li class="parentUlClone">
       <a class="parentLinkClone" href="somewhere">Parent Link</a>
    </li>**
    <li class="childUl">
        <a class="childLink">Child Link</a>
    </li>
  </ul>
</li>

Любые мысли

Ответы [ 3 ]

0 голосов
/ 11 июня 2011

Это моя длинная задница:) 

$('.parentUl').clone().removeClass('parentUl').addClass('parentUlClone').find('>ul').remove().end().prependTo('ul.childUl');
0 голосов
/ 11 июня 2011

Вот решение для вашего случая, которое должно помочь вам начать.Он также должен работать с несколькими «parentUl».

Вот код: 

$(".parentUl").each(function () {
    //build the parent link clone
    var parentLink = $(this).children(".parentLink").first().clone();
    parentLink.removeClass("parentLink");
    parentLink.addClass("parentLinkClone");

    //build the li "clone" - which isn't a clone at all, really
    var li = $(document.createElement("li"));
    li.addClass("parentUlClone");

    //add the link to the li element
    li.prepend(parentLink);

    //add the newly created li element to the childUl
    var childUl = $(this).children(".childUl").first();
    childUl.prepend(li);
});

Оригинальный HTML: 

<ul>
    <li class="parentUl">
        <a class="parentLink" href="somewhere">Parent Link</a>
        <ul class="childUl">
            <li class="childUl">
                <a class="childLink" href="other">Child Link</a>
            </li>
        </ul>
    </li>
</ul>

Получившийся HTML: 

<ul>
    <li class="parentUl">
        <a class="parentLink" href="somewhere">Parent Link</a>
        <ul class="childUl">
            <li class="parentUlClone">
                <a class="parentLinkClone" href="somewhere">Parent Link</a>
            </li>
            <li class="childUl">
                <a class="childLink" href="other">Child Link</a>
            </li>
        </ul>
    </li>
</ul>

Обратите внимание, что я извлек тег a вместо клонирования всего элемента li.Вы можете сделать это по-другому.

Вот скрипка, с которой можно поиграть: http://jsfiddle.net/xonev/U6djs/

0 голосов
/ 11 июня 2011 
$(".parentUl").clone().find(".childUl").remove().end().prependTo($(".parentUl").children("ul")).removeClass("parentUl").addClass("parentUlClone").children().removeClass("parentLink").addClass("parentLinkClone");

Большая длинная непроверенная цепь!

РЕДАКТИРОВАТЬ: Ха, на самом деле работал.

Вот здесь разбито несколько и скрипка. Это будет работать только в том случае, если у вас есть только один из каждого элемента на странице, но идея может быть легко расширена до нескольких.

http://jsfiddle.net/XGann/1/

// clone the parent
var parentClone=$(".parentUl").clone();

// remove the childUl from the clone
parentClone.find(".childUl").remove();

// prepend the clone to the child ul
parentClone.prependTo($(".parentUl").children("ul"));

// remove the old class and add the new
parentClone.removeClass("parentUl").addClass("parentUlClone");

// remove the old class and add the new to the link
parentClone.children().removeClass("parentLink").addClass("parentLinkClone");
...