简体   繁体   中英

jQuery :not() Selector iOS5 compatible?

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();
                    });
                }
            });

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM