2

簡単な質問をしました！私はそのような構造を持つコードを持っています:

    <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」コードのBEFORE EACHリンクを追加したい：<div class="slide">そしてクラス「adv_separator」コードのAFTER EACH divを追加したい：</div>どのようにjqueryでそれを行うことができますか？

ps つまり、これらのリンク、テキスト、および div でネストされた複数の div を作成して、jquery サイクル プラグインを使用してスライダーを作成できるようにしたいと考えています。

助けてくれてありがとう！

4

2 に答える 2

4

単純なロジックですが、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);            
});
于 2013-01-30T09:35:20.013 に答える
4

非常に短いバージョン:

$(".adv_link").each(function() {
    $(this).nextUntil(".adv_separator +")
      .andSelf().add(this.nextSibling)
      .wrapAll("<div class='slide' />");
});

デモ: http://jsbin.com/ukafip/2/

于 2013-01-30T09:38:35.450 に答える