0

Seja o HTML abaixo como exemplo:

<div>
    <a class="link">Link 1</a>
    <a class="link">Link 2</a>
    <a class="link">Link 3</a>
<div>

Como posso selecionar todos elementos de uma classe exceto o elemento $(this) que eu cliquei?

Estou tentando usar o seletor :not() do CSS junto com o jQuery sem sucesso:

$(".link").click(function(event) {
    $(".link" + ":not(" + $(this) + ")").hide(); // Isto não funciona
});

1 Resposta 1

3

Não precisaria nem algo como o :not, bastaria fazer o hide e depois o show apenas para o selecionado, assim:

$(".link").click(function(event) {
    $(".link").hide();
    $(this).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div>
    <a class="link">Link 1</a>
    <a class="link">Link 2</a>
    <a class="link">Link 3</a>
<div>

Agora se for usar com jQuery-ui e animações dele o efeito vai fazer sumir e mostrar o this, o que pode parecer até um bug, neste caso especifico poderia apenas usar o .filter assim:

$(".link").click(function(event) {
    var $this = this;

    $(".link").filter(function (index, element) {
         return element !== $this;
    }).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div>
    <a class="link">Link 1</a>
    <a class="link">Link 2</a>
    <a class="link">Link 3</a>
<div>

Ou mais fácil ainda, usando o .not, assim:

$(".link").click(function(event) {
    $(".link").not(this).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div>
    <a class="link">Link 1</a>
    <a class="link">Link 2</a>
    <a class="link">Link 3</a>
<div>

O filter seria mais interessante para um filtragem mais complexa, para o seu caso o .not já resolve.


API do jQuery:

1
  • 1
    WOW! Três formas! Obrigado @GuilhermeNascimento. 16/04/2019 às 17:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .