7

今日、奇妙な問題に遭遇しました。他の誰かがこれを理解するのを手伝ってくれることを願っています。

私が取り組んでいるプロジェクトは、多かれ少なかれ jQuery スライドショーです。すべてをテストするためにロードしている非常に単純なファイルがあります。次のようになります。

<!doctype html public "(╯°□°）╯︵ ┻━┻">
    <html>
        <head>
            <meta charset="utf-8">
            <title>test</title>
        </head>
        <body>
            <div id="slides" data-slidesShow="holder">
                <div class="slide" id="test1">test div 1</div>
                <div class="slide" id="test2">test div 2</div>
                <div class="slide" id="test3">test div 3</div>
            </div>

            <button id="previous">previous</button>
            <button id="next">next</button>

            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
            <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

            <script type="text/javascript" src="js/slides.js"></script>

            <?php include 'footer.php'; ?>
        </body>
    </html>

繰り返しますが、ここでは遠く離れた空想さえありません。

さて、jQuery では、次のようにページを取得して解析しています。

$.ajax({
    url:      target.path,
    dataType: "html",
    complete: function(data){
        var $slides     =   $('[data-slidesShow="holder"]', $(data.responseText));

        console.log($slides); // returns []
    }
});

しかし！$slides は、次のように無意味な div でラップしない限り、空の配列を返します。

<div class="stupid-wraper-div-that-i-dont-want-or-need">
    <div id="slides" data-slidesShow="holder">
        <div class="slide" id="test1">test div 1</div>
        <div class="slide" id="test2">test div 2</div>
        <div class="slide" id="test3">test div 3</div>
    </div>
</div>

そしていま：

console.log($slides); // returns [<div id="slides" data-slideShow="holder">...</div>]

これ（http://api.jquery.com/jQuery/）およびその他のStackOverflowの会話に関するjQueryドキュメントを読みましたが、結果を返すためにラッパーdivが必要な理由を説明しているものはありません。

何か案は？それが大きな問題ではないことはわかっていますが、問題の根本を見つけることができたときに修正をハックする必要はありません.

...

TL;DR: スコープ内の jQuery の選択は、奇妙なラッパー div でのみ機能します

4

2 に答える 2

3

にコンテキストを渡す$()と、指定された要素をその子孫の中から探すようにセレクターに要求します (これは のように機能し.find()ます)。wrapper がなければ、div探している要素はコンテキスト要素であるため、代わりにその内部を探しているため、セレクターはそれを見つけることができません。

代わりに使用する必要があります.filter()。これは、要素の子孫を検索する代わりに、一連の要素をフィルター処理します。

var $slides = $(data.responseText).filter('[data-slidesShow="holder"]');
于 2012-08-01T21:38:13.230 に答える
2

フィルタを使用する必要があります。

$(data.responseText).filter('[data-slidesShow="holder"]')

htmlタグとbodyタグはブラウザによって削除され、コンテンツが残ります。

于 2012-08-01T21:34:09.467 に答える