选择除 siblings 和 self 之外的所有元素

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

使用.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 2

你想要相反的 ul 所以让我们遍历当前一个的父级，然后跳转到另一个

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

},function(){
  /* similar */

})

Answer 3

html:

<ul class="tnparent">

javascript:

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

选择除 siblings 和 self 之外的所有元素

Selecting all elements EXCEPT siblings and self

javascript

jquery

hover

siblings

jquery-hover