Question

I have something like this:

<ul class="links">

    <li>
        <a title="Link 1 description" href="example.html">Link 1</a>
    </li>

    <li>
        <a title="Link 2 description" href="example2.html">Link 2</a>
    </li>

    <li>
        <a title="Link 3 description" href="example3.html">Link 3</a>
    </li>

    <li>
        <a title="Link 4 description" href="example4.html">Link 4</a>
    </li>

</ul>

And want to get something like this:

<ul class="links">

    <li>
        <span class="description">Link 1 description</span>
        <a title="Link 1 description" href="example.html">Link 1</a>
    </li>

    <li>
        <span class="description">Link 2 description</span>
        <a title="Link 2 description" href="example2.html">Link 2</a>
    </li>

    <li>
        <span class="description">Link 3 description</span>
        <a title="Link 3 description" href="example3.html">Link 3</a>
    </li>

    <li>
        <span class="description">Link 4 description</span>
        <a title="Link 4 description" href="example4.html">Link 4</a>
    </li>

</ul>

I need to extract the value from title of every link and then add this value between span tags with addClass description before the li tag.

Any idea how to do this?

Thanks in advance.

Answer 1

$('a').each(function() {
    $('<span class="description">' + $(this).attr('title') + '</span>')
        .insertBefore(this);
});