javascript - 需要在对象之前和之后添加/div等断开连接的html代码

Question

有一个简单的问题!我有一个结构如下的代码:

    <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...

我想在每个带有“add_link”类的链接之前添加代码:<div class="slide">并在每个带有“adv_separator”类的 div 之后添加代码:</div>我怎样才能用 jquery 做到这一点？

附:换句话说，我想创建几个嵌套有这些链接、文本和div的div，这样我就可以使用jquery循环插件来创建 slider 。

谢谢大家的帮助!

Answer 1

逻辑简单，但你必须知道 DOM 是如何工作的。 (追加“移动”元素，没有“稀疏选择器”，你需要知道在哪里放置新元素等)

$('.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);            
});