为什么 $(this).children() 不能为我工作？

Question

已编辑***感谢您提供以下帮助。我现在理解 $(this).children() 并且我让它工作了......有点。我需要一些帮助才能 100% 完成。

我有一个图标列表，点击后，我将其设置为打开相应图标下方的工具提示和下拉菜单。

所有图标都有相同的类。所有下拉列表看起来都一样（并且具有相同的类），我在 jQuery 代码中使用一个类作为工具提示和下拉列表。

我现在看到，通过使用 .children() 它将首先拉出直接孩子。它正在使用 .hover() 来显示工具提示。但是，对于其他效果（扩大工具提示、滑动下拉菜单，您可以在代码中看到），在 .click() 上没有任何反应。我一直添加 $(this).children() 所以不知道为什么它在一个地方有效，而在另一个地方无效。非常感谢任何和所有帮助。也感谢您迄今为止的帮助。

现在是代码... （请原谅我的缩进不是很好，我不确定我是否是唯一一个在将内容复制/粘贴到这里时遇到问题的人，但它总是搞砸了。我已经修复了一些，但不是 100%）

HTML：

<div class="topIcon">

    <a href="stream.html"><img src="icons/stream16lg.png" /></a>
    <div class="topIconNew"></div>
    <div class="topTip">
        <div class="topTipText">Stream</div>
    </div>
    <div class="topDrop">What's up</div>

</div>

jQuery:

$(document).ready(function() {

var clicked = false;

// tooltip hover

$("div.topIconNew, div.topIcon, div#topSend, div#topTool").hover(
function(){$(this).children("div.topTip").show();},
function(){
    if(!clicked) {
        $(this).children("div.topTip").hide();
        $(this).children('div.topTip').hide();
    }
}
);        

//tooltip widening and dropdown menu

$("div.topIconNew").click(function(){

    //permanent tooltip
    $(this).children("div.topTip").show();  
    $(this).children("div.topTip").animate({width:320,marginLeft:-240},"fast");
    $(this).children("div.topDrop").slideDown(240);
    clicked = true;
});
    $("div.wrapper").click(function(){

    //hide dropdown (hide simultaneously)

    $(this).children("div.topDrop, div.topTip").hide();
});

});     

Answer 1

这是一个猜测

 $('.someClass').click(function(){
    $(this).children(); // to access a dom under the clicked item
    $(this).next();     // to access is direct next dom
 });

所以你只使用被点击的元素

Answer 2

$('.imageClass').click(function() {
    var whatYoureLookingFor = $(this).next('.dropDownTooltipClass');
});

Answer 3

编辑：修改答案以适合您发布的标记。

您的代码不起作用，因为.topTip 不是.topIconNew 的子代。您首先需要使用我在下面的原始答案中描述的技术 - 找到父母，然后找到它的孩子。使用$(this).closest(".topIcon") 查找父级。 .closest() 如果匹配选择器，则返回当前元素，或者匹配选择器的第一个祖先。

$("div.topIconNew, div.topIcon, div#topSend, div#topTool").hover(
    function () { $(this).closest(".topIcon").children("div.topTip").show(); },
    function () {
        if(!clicked) {
            $(this).closest(".topIcon").children("div.topTip").hide();
        }
    }
});

不过，您会发现另一个问题。由于变量clicked 是共享的，因此一旦单击图标，所有工具提示将在悬停所有图标后保持可见。您需要将 clicked 设置为单个图标的本地。实现这一点的最简单方法可能是将clicked 存储在每个.topIcon 的.data() 中：

$("div.topIconNew, div.topIcon, div#topSend, div#topTool").hover(
    function() { $(this).closest(".topIcon").children("div.topTip").show(); },
    function() {
        var icon = $(this).closest(".topIcon");
        if(!icon.data("clicked")) {
            icon.children("div.topTip").hide();
        }
    }
});
$("div.topIconNew").click(function () {
    //permanent tooltip
    var icon = $(this).parent();
    icon.children("div.topTip")
        .show()
        .animate({ width: 320, marginLeft: -240 }, "fast");
    icon.children("div.topDrop").slideDown(240);
    icon.data("clicked", true);
});

---

原答案：

设置您的元素，使图标、工具提示和下拉列表都共享一个共同的父级。像这样的：

<ul>
    <li>
        <img />
        <div>tooltip</div>
        <div>dropdown</div>
    </li>
</ul>

然后，在图标的 .click() 处理程序中，在图标的父级中找到工具提示和下拉菜单：

$("li > img").click(function () {
    $(this).parent().find("div").show();
});

或者，按索引执行。按照与相应工具提示和下拉菜单相同的顺序在标记中设置图标：

<div class="icons">
    <img />
    <img />
    <img />
</div>
<div class="tooltips">
    <div>tooltip</div>
    <div>tooltip</div>
    <div>tooltip</div>
</div>
<div class="dropdowns">
    <div>dropdown</div>
    <div>dropdown</div>
    <div>dropdown</div>
</div>

然后使用.index() 和.eq() 查找工具提示和下拉菜单：

$(".icons > img").click(function () {
    var idx = $(this).index();
    $(".tooltips > div").eq(idx).show();
    $(".dropdowns > div").eq(idx).show();
});