Minimize 12 linhas de jquery em um - jquery

Eu tenho essas linhas de jquery:

$( "#flt21_BD2015" ).click(function() {
$("#flt9_BD2015").closest( "td" ).toggle();
$("#flt10_BD2015").closest( "td" ).toggle();
$("#flt11_BD2015").closest( "td" ).toggle();
$("#flt12_BD2015").closest( "td" ).toggle();
$("#flt13_BD2015").closest( "td" ).toggle();
$("#flt14_BD2015").closest( "td" ).toggle();
$("#flt15_BD2015").closest( "td" ).toggle();
$("#flt16_BD2015").closest( "td" ).toggle();
$("#flt17_BD2015").closest( "td" ).toggle();
$("#flt18_BD2015").closest( "td" ).toggle();
$("#flt19_BD2015").closest( "td" ).toggle();
$("#flt20_BD2015").closest( "td" ).toggle();
});

e

$( "#flt34_BD2015" ).click(function() {
$("#flt22_BD2015").closest( "td" ).toggle();
$("#flt23_BD2015").closest( "td" ).toggle();
$("#flt24_BD2015").closest( "td" ).toggle();
$("#flt25_BD2015").closest( "td" ).toggle();
$("#flt26_BD2015").closest( "td" ).toggle();
$("#flt27_BD2015").closest( "td" ).toggle();
$("#flt28_BD2015").closest( "td" ).toggle();
$("#flt29_BD2015").closest( "td" ).toggle();
$("#flt30_BD2015").closest( "td" ).toggle();
$("#flt31_BD2015").closest( "td" ).toggle();
$("#flt32_BD2015").closest( "td" ).toggle();
$("#flt33_BD2015").closest( "td" ).toggle();
});

É possível minimizar isso? Algo como...

Faça isso de #flt9_BD2015 para #flt20_BD2015.

e o mesmo com o outro:

Faça isso de #flt22_BD2015 para #flt33_BD2015.

Respostas:

3 para resposta № 1

Tente usar o atributo ID "ends with" selector:

$("[id$="_BD2015"]").closest( "td" ).toggle();

Agora, isso selecionará TODOS eles, para que você precise de uma contagem específica de itens dessa lista. Isso, então, torna-se ALTAMENTE dependente do comprimento :(

$("[id$="_BD2015"]").closest( "td" ).slice(0,12).toggle();

Se você precisar do "descanso" deles, você pode fazer o NEXT 12 ou ALL o resto: Isso começa a ficar muito feio como você pode ver.

$("[id$="_BD2015"]").closest( "td" ).slice(13,12).toggle();

$("[id$="_BD2015"]").closest("td").slice(0,12).last().nextAll().toggle();

NOTA: Este é um caso principal para um seletor de classe

EDITAR: com o esclarecimento de dúvidas (manipulador de cliques), você pode simplificar um pouco isso:

$( "#flt21_BD2015" ).click(function() {
$(this).closest("td").prevAll().toggle():
});

NOTA: isto NÃO PODERÁ FUNCIONAR dependendo de quais são as metas do ID - algo em alguma tabela, mas você precisará fornecer algum HTML ou alguma indicação de como a estrutura se parece para lidar melhor com isso.

Se NENHUM deles funcionar corretamente, dado que não temos idéia da estrutura atual, use a sugestão de @richessler (inclua todos os IDs) OU adicione a classe como sugiro aqui. <td class="tdclassfirst">

---

0 para resposta № 2

Você pode escolher o seu desejado Seletor JQuery

E faça algo assim se for compatível com o resto dos seus elementos DOM:

$("[id$=BD2015]").closest("td").toggle();

Como a documentação diz $ = :

Seleciona elementos que possuem o atributo especificado com um valor final exatamente com uma determinada string. A comparação faz distinção entre maiúsculas e minúsculas.

Então, vai levar todos os elementos com id "s terminando com _BD2015. Mas você pode usar outros seletores se quiser, isso é apenas um exemplo.

---

0 para resposta № 3

Tente usar o jquery $= seletor que irá selecionar todos os elementos que terminam exatamente com _BD2015 :

$("[id$="_BD2015"]").closest( "td" ).toggle();

Espero que isto ajude.

---

0 para a resposta № 4

$("#flt22_BD2015, #flt23_BD2015, #flt24_BD2015,...").closest("td").toggle();

---