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

Posted 2023-05-08

【中文标题】为啥 $(this).children() 不能为我工作？

【英文标题】：Why wont $(this).children() work for me?为什么 $(this).children() 不能为我工作？

【发布时间】：2012-01-15 13:00:38

【问题描述】：

已编辑***感谢您提供以下帮助。我现在理解 $(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();
);

);     

【问题讨论】：

我已经更新了下面的答案，以使用您在上面发布的代码。

【参考方案1】：

这是一个猜测

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

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

【讨论】：

只是为了确保我理解正确。我希望它是 $(this).children("children I want selected");?

您可以在两者中使用.childre() 或.next()，如果需要，您可以添加选择器。这取决于您的代码。

【参考方案2】：

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

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