我正在努力让 .children() 工作答案

【问题标题】：I'm struggling to get .children() to work我正在努力让 .children() 工作
【发布时间】：2012-01-15 15:38:29
【问题描述】：

我有一堆具有相同类的项目，当它们被选中时会打开一个工具提示和下拉菜单。它适用于单个项目，但为了让每个项目都与它的特定子项目一起工作，我使用了 .children()。它似乎在某些地方有效，但在其他地方无效。我已经缩小了不起作用的范围，但对原因一无所知...请帮助。

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">Hello</div>

</div>

jQuery:

$("div.topIconNew").click(function(){
 //working
$(this).parent("div.topIcon, div#topSend, div#topTool").css("background-color","#555555");
 //working
$(this).children("div.topTip").show();  
 //not working
$(this).children("div.topTip").animate({width:320,marginLeft:-240},"fast");
 //not working
$(this).children("div.topDrop").slideDown(240);
clicked = true;
});

我没有包含 CSS，因为我不确定这真的是问题所在。我认为这是我的 jQuery，但我真的不知道。感谢您提供任何和所有帮助。

【问题讨论】：

+1 为真棒标题
“我很难让 .children() 工作。”嘿，童工法的存在是有原因的。
您应该开始"accept" 的答案，并额外使用您发现的任何有用的答案和问题投票（请参阅here）。您每天有权投票支持大约 30 个答案或问题（请参阅here）。投票可以帮助其他人在 stackoverflow 上找到最有趣的信息。
这与previous question you asked重复。

标签： jquery html class children

【解决方案1】：

所以我对你拥有的 JavaScript 有点困惑。例如，div.topIconNew 没有孩子，所以我不确定为什么你的$(this).children("div.topTip").show(); 应该工作？也许你想使用$(this).siblings("div.topTip").show();？

以下是适合您的 JavaScript：

$("div.topIconNew").click(function(){
    $(this).parent("div.topIcon, div#topSend, div#topTool")
           .css("background-color","#555555");

    $(this).siblings("div.topTip")
           .show()
           .animate({width:320,marginLeft:-240},"fast");

    $(this).siblings("div.topDrop").slideDown(240);

    clicked = true;
});

【讨论】：

啊哈！我觉得我好笨。我很欣赏这个评论，因为就是这样（我希望如此）。他们是兄弟姐妹，不是孩子。但是，当我有 .children().show() 时，为什么它还能工作呢？诡异的。不过，我会和兄弟姐妹一起尝试，希望能奏效。我不敢相信我错过了……尤其是考虑到我已经盯着该死的代码看了多长时间。
它有效！虽然我仍然需要找出在我点击外部时让该死的下拉菜单消失的最佳方法......但至少我朝着正确的方向迈出了一步。谢谢！
也许仔细检查你的结束标签？可能是您在某处错误地嵌套了一些 HTML？只是在这一点上猜测它为什么会间歇性地工作
没问题，我很高兴它有帮助

【解决方案2】：

这些行

<div class="topIconNew"></div>
<div class="topTip">
    <div class="topTipText">Stream</div>
</div>
<div class="topDrop">Hello</div>

应该是

<div class="topIconNew">
    <div class="topTip">
        <div class="topTipText">Stream</div>
    </div>
    <div class="topDrop">Hello</div>
</div>

【讨论】：

【解决方案3】：

topTip 不是topIconNew 的子代或任何后代。它是一个兄弟姐妹。所以你想使用.siblings()。

$("div.topIconNew").click(function() {
    $(this).parent("div.topIcon, div#topSend, div#topTool").css("background-color","#555555");
    $(this).siblings("div.topTip").show();  
    $(this).siblings("div.topTip").animate({width:320,marginLeft:-240},"fast");
    $(this).siblings("div.topDrop").slideDown(240);
    clicked = true;
});

【讨论】：