Ближайший клон для каждого из ul appendTo следующего класса

ДЕМО: http://jsbin.com/koqili/1/edit

ВОПРОС:

Я хочу клонировать li.has-children a span непосредственно выше (ближе всего) ul.waSlideMenu-menu а затем внутри этого ul.waSlideMenu-menu у первого ребенка есть класс li.waSlideMenu-back, вот где я хочу клон. Прямо сейчас все, что я могу понять, это клонирование каждого из них и помещение их внутрь области. Я дерьмовый в этом.

НЕПРАВИЛЬНО:

У меня есть этот скрипт здесь:

$('.waSlideMenu-menu').closest('.has-children').find('span').clone().appendTo($('.waSlideMenu-back').children());

И то, что он делает, клонирует все пролеты и помещает их все в .waSlideMenu-back. Здесь генерируется html этого беспорядка:

НЕПРАВИЛЬНО:

<ul><code>&lt;li&gt;&lt;a href="#" target="_blank"&gt;Up / &lt;span&gt;About Us&lt;/span&gt;&lt;span&gt;About Us Child&lt;/span&gt;&lt;span&gt;Oahu&lt;/span&gt;&lt;span&gt;Australia&lt;/span&gt;&lt;span&gt;California&lt;/span&gt;&lt;span&gt;Indian Ocean&lt;/span&gt;&lt;span&gt;Indonesia&lt;/span&gt;&lt;span&gt;Atlantic Ocean&lt;/span&gt;&lt;span&gt;Europe&lt;/span&gt;&lt;span&gt;South Africa&lt;/span&gt;&lt;span&gt;Canary Islands&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</code> <p> <span>Я хочу, чтобы это было</span>:</p> <pre class="prettyprint linenums"><ul><code>&lt;li&gt;
 &lt;a href="#" target="_blank"&gt;
 Up / &lt;span&gt;The text of the Span inside the previous .has-children&lt;/span&gt;
 &lt;/a&gt;
 &lt;/li&gt;</code> </ul>
1 ответ

Хотя ваш HTML не является семантически правильным, я добавил имя родительской категории для первых детей li. что вы ищете?

Я попробовал более чистый подход (отличается от DEMO), который меньше зависит от селектора классов. это было бы быстрее

var menu = $('#nav ul');
$('a', menu).on('click', function(){
 var clickedText = $(this).find('span').text();
 var parentDirAnchor = $(this).next('ul').children().first().find('a');
 /*
 one can use either of below approach, dont know which is faster ?
 $(this).next('ul').children(':first-child').find('a');
 $(this).siblings('ul').children('li:first').children('a');
 */
 parentDirAnchor.html(' Up / <b>' + clickedText + '</b>');

});

Working DEMO

licensed under cc by-sa 3.0 with attribution.