Question

I have this code I picked up from a site which animates all the <a> in my document. The problem is that I don’t want to animate all of them, just those that are not in my navbar.

How would I make it so it doesn’t animate / change the style of in my navbar class ?

EDIT: To make it clearer, I want to exlude any <a> from the script which are inside a certain class.

Example:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
        <ul class="nav">
          <li class="">
            ( Exclude ---> )<a href="./index.html">Home</a>
          </li>
          ...

Code:

var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined || document.body.style['MozPerspective'] !== undefined;
    function linkify( selector ) {
        if( supports3DTransforms ) {
            var nodes = document.querySelectorAll( selector );

            for( var i = 0, len = nodes.length; i < len; i++ ) {
                var node = nodes[i];

                if( !node.className || !node.className.match( /roll/g ) ) {
                    node.className += ' roll';
                    node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
                }
            };
        }
    }

    linkify( 'a' );

Answer 1

In your for loop:

var node = nodes[i],
    parent = node.parentNode,
    inFoo = false;

// loop through all parent nodes and search for the unwanted class
while(parent){
  if(parent.className && parent.className.indexOf('foo') > -1){
     inFoo = true;
     break;
  }                       
  parent = parent.parentNode;        
}

if(!inFoo) {
   // do your stuff
}