jQuery选择器的行为不像预期的那样从ajax解析的HTML

今天我遇到了一个奇怪的问题，我希望别人能帮我弄清楚这一点。jQuery选择器的行为不像预期的那样从ajax解析的HTML

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

BUT！ $幻灯片返回一个空数组，除非我把它包在一个毫无意义的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读了jQuery的文档：// api.jquery.com/jQuery/）和其他StackOverflow对话，但他们都没有解释为什么我需要一个包装div来返回结果。

任何想法？我知道这不是一个大问题，但我不想在找到问题的根源时不得不修补问题。

...

TL; DR：jQuery的选择范围只能用怪异的包装DIV

来源

2012-08-01 Zach Wolf

+1台翻盖 – 2012-08-01 21:31:33

立即+1一位Reddit翻转表。欢迎兄弟:) – 2012-08-01 21:31:44

当您将上下文传递给$()时，您要求选择器在给定元素的后代之间进行查找（此操作类似于.find()）。如果没有你的包装div，你正在寻找的元素是上下文元素，所以你的选择器将无法找到它，因为它正在寻找它。

您应该使用.filter()来代替，该过滤器一组元素，而不是搜索他们的后代：

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

来源

2012-08-01 21:38:13 BoltClock

正是我在找什么！而且现在已经解释了这一点非常有意义，我觉得这将是沿着这些路线的东西。 – 2012-08-01 22:08:01

您需要使用过滤器的工作原理。

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

html和body标签被浏览器留下的内容剥离。

来源

2012-08-01 21:34:09

jQuery选择器的行为不像预期的那样从ajax解析的HTML

回答

相关问题