javascript - jquery选择器遍历 - jquery ajax



jQuery选择器不像ajax中解析的HTML那样运行 (2)

今天我遇到了一个奇怪的问题,我希望别人能帮我解决这个问题。

我正在做的项目或多或少是一个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 []
    }
});

但! $幻灯片返回一个空数组,除非我把它包装在一个无意义的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的select范围只能用于一个奇怪的包装div

https://src-bin.com


Answer #1

你需要使用过滤器。

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

html和body标签被浏览器剥离掉内容。


Answer #2

当你将一个上下文传递给$() ,你要求选择器在给定元素的后代中查找(这个工作方式就像.find() )。 如果没有你的包装div ,你正在寻找的元素是上下文元素,所以你的选择器将无法找到它,因为它正在寻找它。

您应该使用.filter() ,而不是搜索其后代,而是筛选一组元素:

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




jquery-selectors