是否可以将 $(this) 与非子元素结合使用?

Posted

技术标签:

【中文标题】是否可以将 $(this) 与非子元素结合使用?【英文标题】:Is it possible to combine $(this) with a non child element? 【发布时间】:2012-09-27 16:43:46 【问题描述】:

我有一个<divs> 的列表与同一类。每个<li> 中有两个<divs>。当用户将鼠标悬停在另一个 <div> 上时,我想隐藏一个 <div>

我遇到的问题是,当我使用以下代码时,当我将鼠标悬停在任何带有“.div_1”类的<div> 上时,每个带有“.div_2”类的<div> 都会被隐藏。

我想要它,所以当用户将鼠标悬停在特定<li> 中的类“.div_1”上时,只有类“.div_2”的<div> 被隐藏

我无法更改标记或类,并且想知道如何实现这一点。我可以将$(this) 与“.div_2”结合起来吗?

<li>
<div class="div_1"></div>
<div class="div_2"></div>
</li>    
<li>
<div class="div_1"></div>
<div class="div_2"></div>
</li> 
... 

$(document).ready(function()
    // MEDIA GALLERY HOVER //

        $(".div_1").hover(
          function ()  $(".div_2").hide(); ,
          function ()  $(".div_2").show(); 
        );

)

【问题讨论】:

【参考方案1】:
$(document).ready(function()
    // MEDIA GALLERY HOVER //

        $(".div_1").hover(
          function ()  $(this).siblings(".div_2").hide(); ,
          function ()  $(this).siblings(".div_2").show(); 
        );

)

或者让你的代码更短 - DEMO

$(document).ready(function()
    $(".div_1").on("mouseover mouseout", function() 
        $(this).siblings(".div_2").toggle();
    );
);

【讨论】:

【参考方案2】:

您可以使用next 方法,它选择元素的下一个兄弟元素或siblings 方法。

$(".div_1").hover(
    function ()  $(this).next().hide(); ,
    function ()  $(this).next().show(); 
);
next() siblings()

【讨论】:

【参考方案3】:
$('.div1').on('mouseover',function()  $(this).siblings('.div2').css('display','none'); );

【讨论】:

【参考方案4】:
    $(".div_1").hover(
      function ()  $(this).siblings(".div_2").hide(); ,
      function ()  $(this).siblings(".div_2").show(); 
    );

【讨论】:

以上是关于是否可以将 $(this) 与非子元素结合使用?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery“this”加上其他选择器?

将两个或多个 Canvas 元素与某种混合相结合

角度传递数组到另一个(非子)组件

使用slot分发内容 作用域插槽

SQL里的子查询

结合多个成员资格测试[重复]