选择除兄弟姐妹和自我之外的所有元素

Question

Two unordered lists. When hovering over one list item I need to darken the list items in the other list, but not the hovered list item's own siblings.

With the code below I'm able to darken all other list items but the one being hovered, but I can't seem to get the siblings into the equation.

HTML:

<ul>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
</ul>
<ul>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
                <li class="tn">
                        <img class="tn-img" src="http://lorempixel.com/360/200" />
                </li>
</ul>

JQUERY:

$('.tn').hover(
function() {
    $(".tn:not(:hover)").not(this).css({"-webkit-filter":"brightness(15%)"});
},
function() {
    $(".tn").css({"-webkit-filter":"brightness(100%)"});
}
);

And for anyone who suggests I should just do the hover over the entire unordered list, it's not possible because of certain restrictions of the design :/

Answer 1

html:

<ul class="tnparent">

javascript:

$('.tnparent:not(:hover) .tn').css({"-webkit-filter":"brightness(15%)"})

Answer 2

Use .closest('ul') to find this list, and then operate just on its siblings.

 $('.tn').hover( function() { var thislist = $(this).closest('ul'); var otherlists = thislist.siblings('ul'); otherlists.find('.tn').css({ "-webkit-filter": "brightness(15%)" }); }, function() { $(".tn").css({ "-webkit-filter": "brightness(100%)" }); } ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="tn"> <img class="tn-img" src="http://lorempixel.com/360/200" /> </li> <li class="tn"> <img class="tn-img" src="http://lorempixel.com/360/200" /> </li> <li class="tn"> <img class="tn-img" src="http://lorempixel.com/360/200" /> </li> </ul> <ul> <li class="tn"> <img class="tn-img" src="http://lorempixel.com/360/200" /> </li> <li class="tn"> <img class="tn-img" src="http://lorempixel.com/360/200" /> </li> <li class="tn"> <img class="tn-img" src="http://lorempixel.com/360/200" /> </li> </ul> 

Answer 3

You want the opposite ul so lets traverse to the parent of current one, and jump over to the other

$('.tn').hover(function(){
   var $currentList = $(this).parent();
   var $otherListItems = $currentList.siblings('ul').find('.tn');
   $otherListItems.doSomething();

},function(){
  /* similar */

})