Ближайший клон для каждого из 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>
 <li><a href="#" target="_blank">Up / <span>About Us</span><span>About Us Child</span><span>Oahu</span><span>Australia</span><span>California</span><span>Indian Ocean</span><span>Indonesia</span><span>Atlantic Ocean</span><span>Europe</span><span>South Africa</span><span>Canary Islands</span></a></li>
</code> <p> <span>Я хочу, чтобы это было</span>:</p> <pre class="prettyprint linenums"><ul><code>
 <li>
 <a href="#" target="_blank">
 Up / <span>The text of the Span inside the previous .has-children</span>
 </a>
 </li>
</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.