Обтекание каждого родительского текста

Question

У меня такая ситуация:

<ul>
    <li>
        <a href="#">Link 1</a>
        <ul>
            <li><a href="">Sub link</a></li>
        </ul>
    </li>
    <li>
        <a href="">Link 2</a>
        <ul>
            <li><a href="">Sub link</a></li>
        </ul>
    </li>
</ul>

И мне нужно обернуть тег span вокруг любого текста, если он имеет дочерний элемент. Так что этот первый ли должен выглядеть как

<li><a href="#"><span>Link 1</span></a>

Это должно быть неограниченным отделом:

<ul>
  <li>
    <ul>
      <li>
        <ul n>
           <li n>

Я даже не представляю, как это решить. Я устал что-то вроде:

$('li').parent().wrapInner('<span />');

Но это не так.

Буду признателен за любую помощь.

Tnx

Answer 1

$('li ul').parents('li').children('a').wrapInner('<span />');

Это должен быть быстрый метод, я ответил на вопрос, аналогичный вчера, и сделал jsperf: http://jsperf.com/jquery-has-vs

Вот jsfiddle для демонстрации: http://jsfiddle.net/n9Ew8/2/

Документы:

.siblings(): http://api.jquery.com/siblings

.wrapInner(): http://api.jquery.com/wrapinner

Answer 2

попробуйте это:

$("li:has(ul) > a").wrapInner("<span />")

выберите тег привязки каждого элемента списка, который имеет дочерний список, и оберните его содержимое в тег span.

http://jsfiddle.net/Tentonaxe/EKjfT/

Редактировать: в ответ на jsperf (Джаспер), попробуйте это: http://jsperf.com/jquery-has-vs/3

$("li").has("ul").children("a").wrapInner("<span />");

Спасибо, что указали на это Джасперу. Обычно быстрее не использовать методы селектора в вашем селекторе и вместо этого использовать фактические методы, такие как .has вместо: has или .eq вместо: eq

Редактировать: Но, не всегда ... http://jsperf.com/recursive-text-wrap, кажется, поддерживает мой первый