Jquery function to javascript function

Question

I have functlion which is working perfactly. Now the client’s requirement is that he doesn’t want to use any other file for js, so I have change this function to be pure JavaScript, i.e. without jQuery. I am confused where to start.

Can you guys tell me a JavaScript function similar to jQuery’s .size method?

http://jsfiddle.net/CgDS6/8/

    <div class="wrap">
        <ul>
            <li>
                <div class="first">
                    <div class="second"></div>
                </div>
            </li>
            <li>
                <div class="first">
                    <div class="active"></div>
                </div>
            </li>
            <li>
                <div class="first">
                    <div class="second"></div>
                </div>
            </li>
        </ul>
        <a href="#" id="next">Next</a>
    </div>

var $firstSecond = $('.second').eq(0);
$('#next').click(function() {
    var $active = $('.active');
    var $nextSecond = $active.closest('li').next().find('.second');
    $active.toggleClass('active second');
    if ($nextSecond.size() != 0) {
        $nextSecond.toggleClass('second active');
    } else {
        $firstSecond.toggleClass('second active');
    }
});

Answer 1

This is supported in IE6+. You could also do this with event handlers, but I didn't want to implement a cross-browser event handler and decided to do this quick and dirty with onclick:

function getElementsByClassName(cn, rootNode) {
  if (!rootNode) {
    rootNode = document;
  } 
  for (var r=[], e=rootNode.getElementsByTagName('*'), i=e.length; i--;) {
    if ((' '+e[i].className+' ').indexOf(' '+cn+' ')>-1) {
      r.push(e[i]); 
    }
  }
  return r;  
}

document.getElementById('next').onclick = function(){
    var active = getElementsByClassName('active')[0],
        lis = getElementsByClassName('wrap')[0].getElementsByTagName('li'),
        nextSecond;

    for (var i = 0, il = lis.length; i < il; i++) {
        if (getElementsByClassName('active', lis[i]).length) {
            nextSecond = i + 1 < il ?
                         getElementsByClassName('second', lis[i + 1])[0] :
                         getElementsByClassName('second', lis[0])[0]
        }
    }

    active.className = 'second';
    nextSecond.className = 'active';
};

Here's a fiddle

Answer 2

Here is a solution in pure javascript:

document.getElementById('next').onclick =  function() {
   var divs = document.getElementsByClassName('second');
   var active = document.getElementsByClassName('active')[0];

   for(var i = 0; i < divs.length; i++) {
     if(divs[i]==active) divs[i].className = 'second';
     if(divs[(i)%divs.length] == active) divs[(i+1)%divs.length].className = 'second active';
   }    
}

JSFIDDLE

Answer 3

To start with, the equivalent for the size method in your specific case to size a jQuery Object in Javascript is length, because jQuery DOM selected objects are arrays.

You can have a look at the jQuery source code to see what they are doing in javascript to make jQuery work. Command-F will find you all the different commands and all.

If it's just about the size of files the client wants to be reduced, copy the jQuery source code in your file. You could also keep different files in your development environment and copy them all together and minify them for production use, which is a common practice, so you have the best of both worlds.

Answer 4

http://jsfiddle.net/DQSna/3/

var firstSecond = document.querySelector(".second");

document.querySelector("#next").addEventListener("click", function() {


    function toggleClasses( node ) {
        node.classList.toggle("active");
        node.classList.toggle("second");    
    }

    var active = document.querySelectorAll(".active"),
        nextSecond = [].map.call( active, function( node ) {
            while (node && node.nodeName.toLowerCase() !== "li") {
                 node = node.parentNode;   
            }
            return node && node.nextElementSibling && node.nextElementSibling.querySelector( ".second" ) || null;
        }).filter(Boolean);

        [].forEach.call( active, toggleClasses );

        if( nextSecond.length ) {
            [].forEach.call( nextSecond, toggleClasses );
        }
        else {
            toggleClasses( firstSecond );
        }
}, false );​

Answer 5

Your jQuery in plain DOM-methods (note that most of them will not be supported by IE):

var firstSecond = document.querySelector(".second'");
document.getElementById("next").addEventListener("click", function(e) {
    var active = document.querySelector(".active"),
        nextSecond = active.parentNode.parentNode.nextElementSibling.querySelector(".second");
    active.classList.remove("active");
    active.classList.add("second");
    (nextSecond || firstSecond).classList.remove("second");
    (nextSecond || firstSecond).classList.add("active");
}, false);

Note that this requires that the elements firstSecond, #next and active are always found - if not, you need to add a check for them being not null.

Your DOM might be cleaner (and the JS simpler) when you:

• would use active as an id, I guess it is unique (which only would make selecting the element easier)
• would set the lis themselves as active, I guess that state counts for the whole branch (and therefore allows more styling)
• would not remove the second class from the divs - they're still second (and active)
• would not use first and second classes at all - you can select those divs with normal CSS selectors (li > div and li > div > div)