Question

got a simple question! i have a code with structure like that:

    <a class="adv_link" target="_blank" href="">Link 1</a>
    text here 1
    <div class="adv_separator"></div>

    <a class="adv_link" target="_blank" href="">Link 2</a>
    text here 2
    <div class="adv_separator"></div>

and etc...

i want to add BEFORE EACH link with class “add_link” the code: <div class="slide"> and add AFTER EACH div with class “adv_separator” the code: </div> how i can do it with jquery?

p.s. in other words i want to create several divs nested with these links,texts and divs so i can use jquery cycle plugin to create a slider.

thank you all for the help!

Answer 1

Simple logic, but you have to know how the DOM works. (Append “moves” the element, there is no “sparse selector”, you need to know where to place the new element, etc.)

$('.adv_link').each(function() {
    var el = $('<div></div>', {'class': 'slide'}),
        link = $(this),
        text = $(this.nextSibling),
        sep = link.nextUntil('.adv_separator');

    // Append each element. Cloned elements, of course.
    el
        .append(link.clone())
        .append(text.clone())
        .append(sep.clone());

    // Remove the separator and the text.
    sep.remove();
    text.remove();

    // And replace the link with the full div containing the cloned elements.
    link.replaceWith(el);            
});