Hide all but $(this) via :not in jQuery selector

2019-01-12 21:59发布

问题:

Advanced title, simple question:

How can I do the following in jQuery (hiding everything except $(this))?

$("table tr").click(function() {
    $("table tr:not(" + $(this) + ")").hide();
    // $(this) is only to illustrate my problem

    $("table tr").show();
});

回答1:

$(this).siblings().hide();

Traversing/Siblings



回答2:

$("table.tr").not(this).hide();

As an aside, I think you mean $("table tr") (with a space instead of a dot).
The way you have it, it selects every table which has a class of tr (eg, <table class="tr">), which is probably not what you want.

For more information, see the documentation.



回答3:

If you want to combine not() with some other selectors, you can use add():

$('a').click(function(e){
  $('a').not(this).add('#someID, .someClass, #someOtherID').animate({'opacity':0}, 800);
});

This would fadeout all other links, but the clicked one, and additionally fadeout some chosen ids and classes.



回答4:

I think a solution can be this:

$("table.tr").click(function() {
    $("table.tr:not(" + $(this).attr("id") + "").hide(); // $(this) is only to illustrate my problem
    $(this).show();
})

--EDIT for Comment:

$("table.tr").click(function() {
    $("table.tr:not(#" + $(this).attr("id") + ")").hide(); // $(this) is only to illustrate my problem
    $(this).show();
})