克隆每个ul appendTo下一个类的最近跨度

Question

DEMO：http://jsbin.com/koqili/1/edit

问题：

我想克隆li.has-children a span紧靠上方（最近？）ul.waSlideMenu-menu，然后在ul.waSlideMenu-menu内第一个孩子有一个班级li.waSlideMenu-back，这就是我想要克隆。现在，我能想到的只是克隆它们中的每一个并将它们放入该区域内。我很蹩脚。

WRONG：

我在这里有这个脚本：

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

它正在做的是克隆所有跨度并将它们全部放在.waSlideMenu-back内。这是生成的混乱的html：

WRONG：

<ul class="waSlideMenu-menu waSlideMenu-inheritedmenu">
   <li class="waSlideMenu-back"><a href="#">Up / <span>About Us</span><span>About Us Child</span><span>Oahu<span></span></span><span></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>

我想要的是：

<ul class="waSlideMenu-menu waSlideMenu-inheritedmenu">
    <li class="waSlideMenu-back">
    <a href="#">
        Up / <span>The text of the Span inside the previous .has-children</span>
    </a>
    </li>

Answer 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