Home/ Questions/Q 8330371
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T02:06:12+00:00

I’ve ran into a weird issue today, I’m hoping someone else can help me

  • 0

I’ve ran into a weird issue today, I’m hoping someone else can help me figure this out.

The project that I’m working on is more-or-less a jQuery slideshow. I have a super simple file that I’m loading to test everything out, it looks something like this: 

<!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>

Again, nothing even remotely fancy here.

Now, in jQuery I’m getting and parsing the page like:

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

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

BUT! $slides returns an empty array, unless I wrap it in a meaningless div, like: 

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

and now:

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

I’ve read over the jQuery docs on this (http://api.jquery.com/jQuery/) and other StackOverflow conversations, but none of them explain why I would need a wrapper div to have results returned.

Any ideas? I know it’s not a huge issue, but I don’t want to have to hack a fix when I could find the root of the problem.

…

TL;DR: jQuery’s select in scope only works with a weird wrapper div

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you pass a context to $(), you’re asking the selector to look among its descendants for the given element (this works like .find()). Without your wrapper div, the element you’re looking for is the context element, so your selector won’t be able to find it since it’s looking inside it instead.

    You should use .filter() instead, which filters a set of elements instead of searching their descendants:

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