Question

Anyone jQuery experts here can help me convert the follwing javascript codes to jQuery? Although it works I’d rather see hows it’s done with jQuery

function loadit(element)
{
    document.getElementById('container').src = element.rel;
    var tabs = document.getElementById('tabs').getElementsByTagName("a");

    for (var i=0; i < tabs.length; i++)
    {
        if(tabs[i].rel == element.rel) 
        {
            tabs[i].className = "selected";
        }
        else
        {
            tabs[i].className = "";
        }
    }
}

Here is the HTML

    <div id="tabs"> 
              <ul> 
                <li><a href="#" rel="/root/a" onClick="loadit(this)" class="selected">A</a></li>
                <li><a href="#" rel="/root/b" onClick="loadit(this)">B</a></li>
                <li><a href="#" rel="/root/c" onClick="loadit(this)">C</li> 
              </ul> 
         </div>
<iframe id="container" name="container"></iframe>

And here is how I populate the container on windowload:

function startit()
{
    var tabs = document.getElementById('tabs').getElementsByTagName("a");
    document.getElementById('container').src = tabs[0].rel;
}

window.onload=startit;

Answer 1

Assuming the parameter passed in (element) is itself a jQuery object, it could look like this.

Note that where ii’m dealing with a jQuery object, I tend to prefix the variable with $ to distinguish it

function loadit($element)
{
    var rel = $element.prop('rel');
    $('#container').prop('src',rel);
    $('#tabs a').each(function(){
        var $a = $(this);
        $a.toggleClass('selected',$a.prop('rel') == rel);
    });
}

edit: I noticed a typo in my code above. I was missing a # from the line

$('#tabs a').each(function(){

Here is a very simplified live example in lieu of your HTML: http://jsfiddle.net/FKf9L/1/

Ive assumed that you’re calling loadit when clicking one of the a‘s which form the tabs. If this is the case it’s a bit redundant, you should just latch onto the click event of the a in jQuery. Making the code:

$('#tabs a').click(function(){
   var $this = $(this);
   var rel = $this.attr('rel');
   $('#container').prop('src',rel);
   $this.siblings().removeClass('selected');
   $this.addClass('selected');
});

See this live example: http://jsfiddle.net/p99Q2/

edit2: You may as well do away with the startit method and just issue a click on the first a within the tabs:

$(document).ready(function(){
    $('#tabs a').click(function(){ 
        ...
    });

    $('#tabs a:first').click();
});

Live example: http://jsfiddle.net/p99Q2/2/