Вопросы Теги

Селектор jQuery ведет себя не так, как ожидалось, в проанализированном HTML из ajax

Сегодня я столкнулся со странной проблемой, я надеюсь, что кто-то еще может помочь мне понять это.

Проект, над которым я работаю, больше -или -меньше слайд-шоу 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>]

Я прочитал документы jQuery по этому(http://api.jquery.com/jQuery/)и другие разговоры о StackOverflow, но ни один из них не объясняет, почему мне нужен div-оболочка для возврата результатов.

Любые идеи? Я знаю, что это не очень большая проблема, но я не хочу ломать исправление, когда я могу найти корень проблемы.

...

TL;DR :jQuery select in scope работает только со странной оболочкой div

7
задан BoltClock 1 August 2012 в 21:38
поделиться