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 回答