Выбор всех элементов ИСКЛЮЧИТЕЛЬНЫЕ братья и сестры

Question

Два неупорядоченных списка. При наведении указателя на один элемент списка мне нужно затемнить элементы списка в другом списке, но не собственные братья и сестры.

С приведенным ниже кодом я смогу затемнить все остальные элементы списка, но тот, который завис, но я не могу заставить братьев и сестер войти в уравнение.

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%)"}); 
} 
); 

И для тех, кто предполагает, я просто должен делать парить над всем неупорядоченным списком, это не представляется возможным из-за определенные ограничения конструкции:/

Answer 1

HTML:

<ul class="tnparent"> 

javascript:

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

Answer 2

Используйте .closest('ul'), чтобы найти этот список, а затем работать только с его братьями и сестрами.

$('.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

Вы хотите противоположностью уль так позволяет траверс к родителю текущего, и перейти на другую

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

},function(){ 
    /* similar */ 

})