Possible JQuery class selector bug

Question

I have an ajax call that returns a HTML fragment. I am trying to select a div in that fragment before rendering.

An example of the HTML:

<div class="event-detail repBy-container">
    <div class="copy">.....</div>
    <div class="links">
       ....
    </div>
    <div class="contacts">
      <div class="name-brand">....</div><div class="details">...., <a href="mailto:...@....">...</a></div>
    </div>
</div>

Now the problem:

function ajaxReturn(data) {
   alert($(data).find('.event-detail').length); <-- Returns 0
   alert($(data).find('.copy').length); <-- Returns 1
}

Is this a bug or am I doing something wrong?

Nick Craver · Accepted Answer · 2010-11-04 16:45:16Z

5

.find() gets descendants only, not from the current level, you'd need .filter() to get items from the current set (which is the root of what you returned), like this:

function ajaxReturn(data) {
   alert($(data).filter('.event-detail').length); //<-- Returns 1
   alert($(data).find('.copy').length); //<-- Returns 1
}

If you want .find() to work in both cases, add the content to a parent container, like this:

function ajaxReturn(data) {
   var parent = $("<div />").append(data);
   alert(parent.filter('.event-detail').length); //<-- Returns 1
   alert(parent.find('.copy').length); //<-- Returns 1
}

answered Nov 4, 2010 at 16:45

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Magpie Over a year ago

Thanks for that, it was driving me nuts

cherouvim · Accepted Answer · 2010-11-04 16:42:51Z

5

This is the expected behavior.

You are searching for .event-detail under your div and there isn't any.
You are searching for .copy under your div and there is one.

answered Nov 4, 2010 at 16:42

cherouvim

32k15 gold badges107 silver badges158 bronze badges

Comments

Spudley · Accepted Answer · 2010-11-04 16:47:02Z

0

It depends on what is being passed into the ajaxReturn function. ie what does data contain?

If it contains the HTML you quoted then this is expected behaviour. This is because the .find() method searches within the current context, not including it. If the outer div in your example is the outer div in data then .find() will be searching for .event-detail inside of that div.

answered Nov 4, 2010 at 16:47

Spudley

169k39 gold badges240 silver badges309 bronze badges

Collectives™ on Stack Overflow

Possible JQuery class selector bug

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related