logo标签列表

jQuery选择下一个<div>元素

jquery
3

我有一个简单的div布局html，其中有一个函数，当鼠标悬停在className为“personal-icon-email”的div上时，我会调用JS函数并显示className为“img-info-mask”的隐藏div。

<div class="user-panel">
<div class="user-panel-avatar"><img src="http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=80"/></div>
<div class="user-panel-username">Frank</div>
<div class="user-panel-info">Hi there, May name is Frank ....</div> 
<div class="personal-icon-email pie-adj" onmouseover="showTips(this);" id="123321"></div>
<div class="personal-icon-hi pihi-adj"></div>
<div class="personal-icon-fav pifav-adj"></div>
<div class="img-info-mask">Contact Frank Now</div>

我正在使用jQuery，尝试了以下方法：

function showTips(object){$(object).next('.img-info-masks').show(); }

但是失败了。 还尝试过
function showTips(object){$('#123321').next('.img-info-masks').show();}
仍然不起作用。 有人能告诉我错在哪里以及我应该怎么做吗？非常感谢：D
首先，应该是img-info-mask而不是img-info-masks。你想要显示的div是否是页面上唯一具有该类名的div？如果是，你可以直接使用$('.img-info-mask').show(); - GoldenNewby
请注意，使用全数字（例如123321）作为id属性的值是无效的HTML，这可能会导致JavaScript出现问题。 - Dave L.
你已经在使用jQuery了...是时候升级你的事件绑定并使用.on()代替内联的onmouseover了（假设使用的是jQuery 1.7+，否则使用.bind()（包括bind别名）或.delegate()）。 - Greg Pettit
5个回答
4
你可以使用 nextAll() 代替 next()，然后找到你的 img-info-mask。
如果想显示所有的 div.img-info-mask，请尝试：
$(object).nextAll('div.img-info-mask').show();

如果您想要首先选择包含 .img-info-mask 的 div 元素。

$(object).nextAll('div.img-info-mask:first').show();
1
$("div.personal-icon-email").mouseover(function(){
     $("div.img-info-mask").show();
});

您需要选择要监视鼠标悬停事件的项目，然后添加mouseover事件处理程序。在该函数中，您可以显示隐藏的div。您还可以使用hover()事件处理程序来显示它，然后在鼠标离开时隐藏它，如下所示：

$("div.personal-icon-email").hover(function(){
    //mouseover event
    $("div.img-info-mask").show();
},
function(){
    //mouseout event
    $("div.img-info-mask").hide();
});

或者你可以让它更简单：

$("div.personal-icon-email").hover(function(){
    //mouseover and mouseout event
    $("div.img-info-mask").toggle();
});

这将调用一个函数来处理mouseover和mouseout事件，每次切换可见性。

现在你想仅对下一个隐藏信息执行此操作？好的，也可以做到。

$("div.personal-icon-email").hover(function(){
    //mouseover and mouseout event
    $(this).parent().find('div.img-info-mask').toggle();
});

这将针对具有 .img-info-mask 类的下一个同级 div。您需要确保每组像您提供的示例一样的 div 都在父 div 中，否则您将同时切换所有隐藏的 div。

谢谢，我的问题是有大约100个具有相同类名的div，我只想显示最近的那个具有这个类名的div。 - Frank
1
哦，你的问题没有表达清楚。但还是可以做到的。 - Surreal Dreams
@SurrealDreams 我不知道有nextUntil这个方法...我习惯使用closest或parent再加上find。谢谢！ - Greg Pettit
不得不稍微调整一下 - $(this).nextUntil() 不起作用，但是 $(this).parent().find() 可以。这要感谢 Andreas。 - Surreal Dreams
1

next() 只检索紧接着的下一个兄弟节点，它并不实际遍历所有兄弟节点。

http://api.jquery.com/next/

Get the immediately following sibling of each element in the set of 
matched elements. If a selector is provided, it retrieves the next 
sibling only if it matches that selector.

首先，如果您将这些 div 包装在一个父 div 中，您可以执行以下操作：

$(this).parent().find('.img-info-mask').show()
1
哇...非常感谢你.... 我花了整个早上，而你只用了5秒钟就把我唤醒了。非常感谢你 :DD - Frank
0
你的意思是： 

$(".personal-icon-email").hover(function() {
  $(".img-info-mask").show();
},
function() {
  $(".img-info-mask").hide();
});
0

jquery next: 获取匹配元素集合中每个元素的紧邻后续同级元素。如果提供了选择器，则仅检索下一个同级元素，如果与该选择器匹配。

.img-info-masks 不是所选元素的紧邻后续同级元素。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接