jQuery :not() Selector iOS5 compatible?

Question

I am using the following block of jQuery in my clients wordpress blog:

  jQuery(this)
      .children(":not('.previewTitle, .previewBody')")
      .fadeTo(fadeTime, activeOpacity, function(){
      //some code
});

This code fades the parent container (this), but not the two inner containers .previewTitle and .previewBody as I would like. This code works in all major browser versions except iOS (5) Safari - does anyone have any idea why iOS has beef with me?

Thanks!

EDIT: Ive checked your test code over a few times, but I really cannot see a difference. Here is my full code:

jQuery(thumbs).hover(
            function(){
                jQuery(this).children(":not(.previewTitle, .previewBody)").fadeTo(fadeTime, activeOpacity, function(){
                    //Display Preview Body once faded in
                    strId = jQuery(this).closest('div').attr('id'); //Get parent DIV ID
                    jQuery('#previewTitle' + strId.substr(9)).show();
                    jQuery('#previewBody' + strId.substr(9)).show();
                });
            },
            function(){
                // Only fade out if the user hasn't clicked the thumb
                if(!jQuery(this).hasClass(clickedClass)) 
                {
                    //Fade out of thumbnail..
                    jQuery(this).children(":not(.previewTitle, .previewBody)").fadeTo(fadeTime, inactiveOpacity, function(){
                        //Hide Preview Body once faded out
                        strId = jQuery(this).closest('div').attr('id'); //Get parent DIV ID
                        jQuery('#previewTitle' + strId.substr(9)).hide();
                        jQuery('#previewBody' + strId.substr(9)).hide();
                    });
                }
            });

T.J. Crowder · Answer 1 · 2012-06-01T14:26:16.773

3

You don't put the argument to :not in quotes, just:

jQuery(this).children(":not(.previewTitle, .previewBody)").fadeTo(....
//            no quote ----^              no quote ----^

:not accepts a selector, not a string. I'm intrigued it works on other browsers with the quotes...

Other than that, it should work. It works for me on iOS 4.3.2 (my wife's iPad): Live copy | source

HTML:

<p>Click anywhere in the shaded container:</p>
<div id="container">
  <p>Child that will fade</p>
  <p>Another that will fade</p>
  <p class="previewTitle">previewTitle - won't fade</p>
  <p>Another that will</p>
  <p class="previewBody">previewBody - won't fade</p>
  <p>Another that will</p>
</div>

JavaScript:

jQuery(function($) {

  $("#container").click(function() {
    $(this)
      .children(":not('.previewTitle, .previewBody')")
      .fadeTo("slow", "0.2");
  });

});

...but I don't have iOS 5 handy to test.

Side note:

This code fades the parent container (this), but not the two inner containers .previewTitle and .previewBody as I would like.

The code you've quoted doesn't fade the parent container at all. It fades all of its children except the two listed. That's not the same thing.

edited Jun 01 '12 at 14:26

answered Jun 01 '12 at 14:03

T.J. Crowder

1,031,962
187
1,923
1,875

@Matt if you just put a single class in the `:not` selector does it work ? and have you tried using `.not()` instead ? – Manse Jun 01 '12 at 14:09
@Matt: Without the quotes? That's odd. – T.J. Crowder Jun 01 '12 at 14:10
@Matt: Works for me with both: http://jsbin.com/anufer Tested it on my wife's iPad 2, but it only has iOS 4.3.5. If that link doesn't work for you on iOS 5, sounds like a bug somewhere (in jQuery, in WebKit, dunno). – T.J. Crowder Jun 01 '12 at 14:15
@T.J Must be an iOS5 thing then :( – Matt Jun 01 '12 at 14:17
1

@T.J your link does work correctly on my iPad! I had best recheck my code – Matt Jun 01 '12 at 14:23
jQuery actually does allow you to quote the argument to `:not()`, but I haven't the slightest clue why. I've posted a question: http://stackoverflow.com/questions/12475595/why-do-jquerys-not-and-has-selectors-allow-quoted-arguments – BoltClock Sep 18 '12 at 10:57

jQuery :not() Selector iOS5 compatible?

1 Answers1