Нужна помощь в преобразовании этого фрагмента кода в jQuery

Question

Кто-нибудь из экспертов jQuery может помочь мне преобразовать javascript-коды follwing в jQuery? Хотя это работает, я бы предпочел видеть хау это сделано с 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 = ""; 
     } 
    } 
} 

Вот 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> 

А вот как я заполнить контейнер на windowload:

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

window.onload=startit; 

Answer 1

Предполагая, что параметр, переданный в (element) сам объект JQuery, он может выглядеть следующим образом.

Обратите внимание, что где ii'm дело с объектом JQuery, я, как правило, префикс переменной с $, чтобы отличить его

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

редактировать: Я заметил опечатку в моем коде выше. Я пропускал # от линии

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

Вот очень упрощен живой пример вместо вашего HTML: http://jsfiddle.net/FKf9L/1/

Ive предположил, что вы вызываете loadit при нажатии одной из a-х, которые сформируйте вкладки. Если это так, это немного избыточно, вы должны просто защелкнуться на событие щелчка a в jQuery. Создание кода:

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

Посмотреть этот живой пример: http://jsfiddle.net/p99Q2/

edit2: Вы можете также сделать прочь с помощью метода startit и просто выдать click на первом a в закладках:

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

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

Живой пример: http://jsfiddle.net/p99Q2/2/

Answer 2

Этот является очень простым. Чтение учебника jQuery в течение пятнадцати минут должно научить вас достаточно, чтобы сделать это самостоятельно через еще пятнадцать минут.

Answer 3

так много способов сделать это. это использует больше конструкций jquery.

function loadit(element) 
{ 
    $('#container')[0].src = element.rel; 
    $('#tabs a').each(function(idx){ 
     var tab = $(this); 
     tab.attr('class',''); 
     if(tab.rel == element.rel) 
     { 
     tab.attr('class','selected'); 
     } 
    } 
} 

Answer 4

function loadit(element) { 

    var rel = element.rel; 

    $("#container").attr("src") = rel; 
    var $tabs = $("#tabs a"); 

    $tabs.each(function() { 
     var $tab = $(this); 

     $tab.removeClass("selected"); 

     if ($tab.attr("rel") == rel) { 
     $tab.addClass("selected"); 
     } 
    }); 
}