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

Posted 2023-05-08

【中文标题】选择除兄弟姐妹和自我之外的所有元素

【英文标题】：Selecting all elements EXCEPT siblings and self

【发布时间】：2015-03-22 04:42:32

【问题描述】：

两个无序列表。当悬停在一个列表项上时，我需要使另一个列表中的列表项变暗，而不是悬停的列表项自己的兄弟姐妹。

使用下面的代码，我可以使所有其他列表项变暗，但悬停的项除外，但我似乎无法让兄弟姐妹进入等式。

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>

查询：

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

);

对于任何建议我应该将鼠标悬停在整个无序列表上的人，由于设计的某些限制，这是不可能的：/

【参考方案1】：

html:

<ul class="tnparent">

javascript：

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

【讨论】：

完美运行。谢谢！

【参考方案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>

【讨论】：

是的，刚刚意识到

【参考方案3】：

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

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

,function()
  /* similar */

)