0

以前の質問に関連して (Cryo さん、ご回答ありがとうございます)、javaScript の専門家についてさらに質問があります。

次のような html 構造があるとします。

<content>
    <div entry>
        <div rubric>
            <a name>
        </div>
        <div content block>
            <p>
            <a links>
        </div>
    </div entry>
    .
    .
    . multiple identical entry divs

</content>

jQuery を使用して、指定されたアンカー名を見つけ、それを含むエントリ div の html マークアップ全体を、新しいクラス名とともに、次のようにシャドウボックスの html プレーヤーに渡すことができる文字列として返したいと考えました。

"""
<div newclassname>
    <div rubric>
        <a name>
    </div>
    <div content block>
        <p>
        <a links>
    </div>
</div>
"""

次のコードはこれを行いますが、1 つのしわで、<div ルーブリック> と <div コンテンツ ブロック> のドキュメントの順序が逆になっています。

var $pageEntry = null;

jQuery.get('thatPage.html', function(data){
    $pageEntry = jQuery(data).find("#content");
});

function displayEntry(entry){
    html = $pageEntry.find("a[name='" + entry + "']")
        .parent()
        .siblings()
        .andSelf()
        .wrapAll('<div class="newclassname"></div')
        .parent()
        .parent()
        .html()

    Shadowbox.open({
        options: {
            enableKeys: false
        },
        player: 'html',
        content: html
    });
};

返された文字列内の要素のドキュメントの順序を保持する、あまり冗長でない jQuery チェーンを提案できる人はいますか? 役立つ提案や観察は大歓迎です。ストレート js でこれを行うためのより簡単な方法があれば、それも知りたいです。

ありがとう、

ジョン

更新：Pointyからのコメントのおかげで答え：

elem = $("#content")
.find("a[name=entry]")
.parent()
.parent()
.wrapAll('<div class="new"></div')
.parent()
.html()
4

1 に答える 1

0

私にとって最も簡単なことは、ルーブリックとコンテンツ ブロックのペアがある種のクラス マーカーを共有していることを確認することです。次に、リンクから外側のコンテナーまでずっと移動し、目的の 2 つの div を見つけることができます。

[編集] ちょっと待ってください - それらはすでに "entry" div の中にありますよね? 各ルーブリック/コンテンツ div ペアの周りに常にコンテナーがある場合は、「a」タグからそのレベルに移動してから、子 div を取得してみませんか?

// ...
html = $pageEntry.find('a ... ')
  .parent().parent()
  .children()
  .wrapAll('<div class="newclassname"/>')
  // ...
于 2010-02-11T16:23:25.357 に答える