0

I'm looking for the best way to tidy this up, or the actual fastest and best way to execute such method.

I've read plenty of questions on stackoverflow and cant work this one out. I have a working solution below, but it seems bloated and there maybe a faster or more cleaner approach to this.

See test fiddle here.

I am trying to run a function but only if an array of classes don't exist in my body tag.

See working code below...

// run scroll reveal if none of these ie classes exist in the body tag
if (!$('BODY.ie-9,BODY.ie-8,BODY.ie-7,BODY.ie-6')[0]) {

  // scroll reveal function
  window.sr = new ScrollReveal({ reset: false });
  sr.reveal('FIGURE', { duration: 300 });

}

The only way it seems that i could get the result I wanted want was by having to list BODY.ie-9,BODY.ie-8,BODY.ie-7,BODY.ie-6 as the a selector.

The result I want is to run the child function if none of these .ie- classes exist in the body tag.

Any suggestions would be much appreciated. Thanks

joshmoto
  • 1,650
  • 2
  • 14
  • 21
  • You are using wrong selector. It is enough to use, for example, `.ie-7` – SaidbakR Sep 16 '16 at 00:38
  • 1
    does this not mean it will try check every single element in the dom for that class? Causing it take longer to check? – joshmoto Sep 16 '16 at 00:40
  • I don't mean that exactly, I only mean to remove `BODY` from the selectors. – SaidbakR Sep 16 '16 at 00:41
  • After googling for "jquery check if an element has a class that starts with", I found [this](http://stackoverflow.com/questions/16165149/jquery-if-element-has-class-which-begins-with-x-then-dont-addclass). There are more like it. [This one](http://stackoverflow.com/questions/2214952/jquery-hasclass-check-for-more-than-one-class) even has an old benchmark which you could run yourself to see how it performs today! –  Sep 16 '16 at 00:42
  • @Termius I also saw [this post](http://stackoverflow.com/questions/2214952/jquery-hasclass-check-for-more-than-one-class) but if you look at the graph key, the red is `.is` and the blue is `.hasClass`, but he says `.is` 35% slower...? But the graph says `.is` faster? Where do you test this speed stuff? – joshmoto Sep 16 '16 at 00:48
  • can use an ie conditional comment if all you are looking for is ie<10. They dropped conditional comment support in iE10 – charlietfl Sep 16 '16 at 00:48
  • @charlietfl ive already got body classes from php and all my js in minified so i'm trying to keep it clean. But i've tried things like `BODY:not(".ie-9,ie-8,ie7")` but don't seem to work. I'm just wondering if there a better a jQ solution without having to use conditional comments. I struggled earlier to get conditional comments handle all non ie browsers + ie9 and below. – joshmoto Sep 16 '16 at 00:53
  • @sємsєм if i removed `BODY` from the selectors, then surely the dom will try check every single outputted element for these `.ie-` classes no? – joshmoto Sep 16 '16 at 00:55
  • what you are doing now seems fine to me to be honest. Would test `length` of the jQuery collection myself but that's just preference. As for keeping body selector tht would be far more performant than just class selector – charlietfl Sep 16 '16 at 00:56

1 Answers1

3

You don't even need jQuery:

// run scroll reveal if none of these ie classes exist in the body tag
if (!/(?:^|\s)ie\-[6-9](?:$|\s)/.test(document.body.className)) {
    // ...
}

This solution simply checks the class attribute on <body> and tests for whether a class name matches ie-{character between 6 and 9, inclusive} using Regex. It also makes sure that it matches a whole class name (padded by whitespace or by the beginning / ending of the string).

rgajrawala
  • 2,148
  • 1
  • 22
  • 35
  • 1
    Yeaaaah mate. That is sweet! Regex man need to get on this! Thanks dude – joshmoto Sep 16 '16 at 01:01
  • Sorry to bother you again, just intregued with your method, see this fiddle https://jsfiddle.net/7md36thw/3/ i'm doing practically the same method but how do you target left over `DIV` elements with pure js? – joshmoto Sep 16 '16 at 01:31
  • 1
    @joshmoto You can try something like [this](https://jsfiddle.net/7md36thw/5/). Note that [`Array.prototype.some()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some) is not supported in IE<=9. You can use the [polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some#Polyfill) for that. – rgajrawala Sep 16 '16 at 01:44
  • sorry missed this but thank you for your advice on this, really helpful – joshmoto Sep 29 '16 at 12:11