2010-03-04 27 views
7

Mam tabelę z wieloma wierszami danych i chcę pokazać lub ukryć niektóre szczegóły w każdym wierszu na podstawie pola wyboru w pierwszym elemencie. Na przykład:Jak dostać się do elementów kuzyna za pomocą JQuery?

<table> 
    <tr> 
    <td><span class="aspnetweirdness"><input type=checkbox></span></td> 
    <td>Text Text Text</td> 
    <td><select /></td> 
    <td><input type=text></td> 
    </tr> 
</table> 

szukam przemierzać z pola wyboru dla elementów spokrewnionych (tekstu, wybierz i wprowadzania tekstu) z jQuery i przełączać widoczność tych elementów na podstawie tego, czy pole wyboru jest sprawdzone. Jeden mały szkopuł jest taki, że pole wyboru jest zawijane w rozpiętość, ponieważ jest to wyprowadzane przez asp.net. To sprawia, że ​​elementy są trudniejsze do uzyskania po id.

Jak miałbym to zrobić? Próbowałem $ (this) .parentsUntil ('tr') .siblings(), ale nie wydaje mi się, aby uzyskać odpowiednie elementy.

Każda pomoc zostanie doceniona.

EDIT:

$(".crewMemberTable input:checkbox").toggle(function() { 
      $(this).closest('tr').find('select, input:not(:checkbox)').fadeIn(); 
      $(this).closest('tr').find('label').css('font-weight', 'bold'); 
     }, function() { 
      $(this).closest('tr').find('select, input:not(:checkbox)').fadeOut(); 
      $(this).closest('tr').find('label').css('font-weight', 'normal'); 
     }); 

Odpowiedz

12

Dobrze czy próbowałeś:

$(this).closest('tr').find('td:not(:first-child)') 

gdzie "to" byłby to elementem wyboru, jeśli kod był w "kliknięcie" obsługi czy coś.

+0

To mnie dopadło w parku, dzięki! – Barry

2
$('input[type=checkbox]').click(function() { 
    $(this).closest('td').siblings().find('select,input').hide(); 
}); 
+0

Właściwie prawdopodobnie nie zawsze chce ukryć pozostałe elementy; prawdopodobnie chciałby je pokazać, gdy pole wyboru jest zaznaczone, i ukryć je w przeciwnym razie, a może na odwrót. – Pointy

+0

Zdaję sobie sprawę, że nie chce ich zawsze ukrywać. To był przykład, jak je znaleźć. –

3

wiem, jest to stara sprawa, ale ja po prostu natknął się na niego i realizowany Niedawno napisałem funkcję rodzajowy dla tego produktu.

Korzystanie z funkcji pod tobą może po prostu napisać $(this).cousins() dostać zbiór zawierający tekst, wybierz i elementy tekstowe wejściowe (gdzie this jest oczywiście twój wyboru.)

/* See http://addictedtonew.com/archives/414/creating-a-jquery-plugin-from-scratch/ 
* Used like any other jQuery function: 
*  $(selector).cousins() 
*/ 
(function($) { 
    $.fn.cousins = function() { 
     var cousins; 
     this.each(function() { 
      var auntsAndUncles = $(this).parent().siblings(); 
      auntsAndUncles.each(function() { 
       if(cousins == null) { 
        cousins = auntsAndUncles.children(); 
       } 
       else cousins.add(auntsAndUncles.children()); 
      }); 
     }); 
     return cousins; 
    } 
})(jQuery) 
+0

Czy "przodków" lepiej nie nazwano by "ciotkami", ponieważ technicznie nie będą oni przodkami obecnego węzła? –

+0

Tak naprawdę myślałem o nazwaniu tej zmiennej 'auntsAndUncles', ale zdecydowałem, że' przodkowie' są prostsze. Twierdziłbym też, że ciocie i wujowie technicznie * są * przodkami, ale to jest pytanie dla english.stackexchange.com;) – Rob

+0

Nie zgadzam się - i nie robię słowników ani wikipedia: http://en.wikipedia.org/wiki/Ancestor http://dictionary.reference.com/browse/ancestor ale domyślam się, że mógłbyś poprosić o na angielski dla innej opinii. Jednak nadal lubię twoją odpowiedź, więc i tak dałem ci uptoote :) –

0

Jestem nowy na stackoverflow i nie jestem pewien, czy mogę lub nie, ale zredagowałem odpowiedź @robjb i zamieszczam tutaj. Pełny kredyt idzie tylko do niego.

W przypadku, gdy ktoś chce wybrać tylko wybranych kuzynów, a nie wszystkich kuzynów (tzn. Chce mieć selektor), możemy użyć zmodyfikowanej wersji odpowiedzi @robjb. Jeśli argument selektor nie zostanie przekazany jako argument, da to wszystkim kuzynom.

(function($) { 
$.fn.cousins = function(selector) { 
    var cousins; 
    this.each(function() { 
     var auntsAndUncles = $(this).parent().siblings(); 
     auntsAndUncles.each(function() { 
      if(cousins == null) { 
       if(selector) 
        cousins = auntsAndUncles.children(selector); 
       else 
        cousins = auntsAndUncles.children(); 
      } 
      else { 
       if(selector) 
        cousins.add(auntsAndUncles.children(selector)); 
       else 
        cousins.add(auntsAndUncles.children()); 
      } 
     }); 
    }); 
    return cousins; 
    } 
})(jQuery) 

Przykładowe zastosowanie powyższej funkcji będzie tak

$(clickedObj).cousins('.singleWheel'); 

Innym rozwiązaniem byłoby użycie .filter() i odpowiedź wykorzystaniu koniecznie @ robjb'S.

Powiązane problemy