индекс jquery в таблице

Question

Вот мой стол. Я хочу очистить jquery, чтобы я мог использовать эту логику во многих строках в html таблицы.

<table>       
    <tr> 
     <td class="check"><input class="select_service3 user_checkbox" type="checkbox"></td> 
     <td class="name">NAME</td> 
     <td class="duration"> 
      <span class="duration3">30 min</span> 
      <a class="custom_duration_link3">Custom</a> 
      <span class="custom_duration_input3"><input class="custom" type="text"> min <button class="custom_duration_save3">Save</button></span> 
     </td> 
     <td class="price">$25 <a class="custom_price_link3">Custom</a></td> 
    </tr> 
</table> 

JQuery

$(".custom_duration_link3").hide(); 
    $(".custom_price_link3").hide(); 
    $(".custom_duration_input3").hide(); 

    $(".select_service3").click(function(){ 

    if ($(".select_service3").is(":checked")) 
    { 
     $(this).closest("tr").addClass("active"); 
     $(".custom_duration_link3").show(); 
     $(".custom_price_link3").show(); 

     $('.custom_duration_link3').click(function(){ 
      $('.custom_duration_link3').hide(); 
      $('.duration3').hide(); 
      $('.custom_duration_input3').show(); 
     }); 

     $('.custom_duration_save3').click(function(){ 
      $('.custom_duration_input3').hide(); 
      $('.duration3').show(); 
      $('.duration3').addClass("notused"); 
     }); 

    } 
    else 
    { 
     $(this).closest("tr").removeClass("active"); 
     $('.custom_duration_link3').hide(); 
     $('.custom_duration_input3').hide(); 
     $('.duration3').show(); 
     $('.duration3').removeClass("notused"); 
     $('.custom_price_link3').hide(); 
    } 
    }); 

Какой я сделать, чтобы очистить этот код и не должны делать ".duration1" ," .duartion2" , и т.д ...

Спасибо за помощь ,

Answer 1

В основном, используйте функцию this в своей функции для извлечения активной строки. Затем только ссылочные имена классов в пределах этой строки. Вот краткий демо:

http://jsfiddle.net/znxQk/

Идея заключается в том, чтобы использовать что-то вроде этого:

var current = $(this).closest("tr"); 
$(".custom_price_link",current).show(); 

Answer 2

Я знаю, что вы получили ваш ответ, но если вы не хотите, чтобы указать селекторы вручную и их положение будет таким же в будущем, тогда вы можете пойти с этим.

if ($(".select_service3").is(":checked")) 
    { 
     $(this).closest("tr").addClass("active"); 
     $(this).parent() 
      .siblings('.duration').children(':not(:last)').show().end() 
      .children('a').click(function() { 
       $(this).parent() 
        .children().hide().end() 
        .children(':last').show() 
        .children('button').click(function() { 
         $(this).parent().hide().parent().children(':first').addClass('notused').show(); 
        }); 
      }).end() 
      .siblings(':last').children('a').show(); 
    } 
    else 
    { 
     $(this).closest("tr").removeClass("active"); 
     $(this).parent() 
      .siblings('.price').children('a').hide().end() 
      .siblings('.duration').children(':first').removeClass('notused').show().end() 
      .children(':not(;first)').hide(); 
    } 

Демо: http://jsfiddle.net/92cMj/