在 jQuery 中向上移动多个父级 - 更有效的方式？
Posted
技术标签:
【中文标题】在 jQuery 中向上移动多个父级 - 更有效的方式？【英文标题】：Moving up multiple parents in jQuery - more efficient way? 【发布时间】：2011-01-04 10:07:57 【问题描述】：所以，我有一个导航，它是一个列表，有子列表和子列表。
基本上，导航默认是折叠的，但是如果人们点击子列表中的页面，我想显示父列表。如果它是子列表的子列表，我需要显示两个父列表。我已经设置好了，但是，我不喜欢将 5 个 .parent().parent() 向上遍历以展开列表。有没有更有效的方法？
html：
<div id="lesson-sidebar">
<ul>
<li><a href="index.html">Welcome to Beat Basics and Beyond</a></li>
<li><a href="table-of-contents.html">What's in this course?</a></li>
<li><a href="defining-your-beat.html" class="active">Defining Your Beat</a>
<ul>
<li><a href="boundaries-of-your-beat.html">Boundaries of Your Beat</a></li>
<li><a href="the-beat-description.html">The Beat Description</a></li>
<li><a href="build-your-own-beat-description.html"><span class="ital">Activity:</span> Build Your Own Beat Description</a></li>
</ul>
</li>
<li><a href="getting-started.html">Getting Started</a>
<ul>
<li><a href="debrief-your-predecessor.html">Debrief Your Predecessor</a></li>
<li><a href="predecessor-top-five-tips.html"><span class="ital">Activity:</span> List The Top Five Tips From Your Predecessor</a></li>
<li><a href="covering-your-beat-with-the-internet.html">Covering Your Beat With The Internet</a></li>
<li><a href="get-in-the-car-and-go.html">Get in the Car and Go</a></li>
<li><a href="mapping-your-beat.html">Mapping Your Beat</a></li>
<li><a href="read-the-clips.html">Read the Clips</a></li>
<li><a href="activity-dissect-this-clip.html"><span class="ital">Activity:</span> Dissect This Clip</a></li>
<li><a href="writing-your-first-article.html">Writing Your First Article</a></li>
<li><a href="starting-cold-on-the-beat.html">Starting Cold on the Beat</a></li>
</ul>
</li>
<li><a href="working-with-sources.html">Working With Sources</a>
<ul>
<li><a href="finding-sources.html">Finding Sources</a></li>
<li><a href="diversify-your-sources.html">Diversify Your Sources</a></li>
<li><a href="prospecting-for-stories-and-sources.html">Prospecting for Stories and Sources</a></li>
<li><a href="building-relationships.html">Building Relationships</a></li>
<li><a href="going-off-the-record.html">Going Off the Record</a></li>
</ul>
</li>
<li><a href="developing-resources.html">Developing Resources to Help You on the Beat</a>
<ul>
<li><a href="develop-a-calendar-of-events.html">Develop a Calendar of Events</a></li>
<li><a href="build-your-library.html">Build Your Library</a></li>
<li><a href="learn-the-open-record-laws.html">Learn the Open Record Laws</a></li>
</ul>
</li>
<li><a href="extra-resources.html">Extra Resources</a>
<ul>
<li><a href="beat-breakdown-tool.html">Beat Breakdown Tool</a></li>
<li><a href="links-library.html">Links Library</a>
<ul>
<li><a href="general-resources-for-any-beat.html">General Resources for Any Beat</a></li>
<li><a href="courts-and-criminal-justice-links.html">Courts and Criminal Justice Links</a></li>
<li><a href="education-resources.html">Education Resources</a></li>
<li><a href="local-government-links.html">Local Government Links</a></li>
<li><a href="neighborhood-or-suburban-links.html">Neighborhood or Suburban Links</a></li>
<li><a href="police-and-public-safety-links.html">Police and Public Safety Links</a></li>
<li><a href="reporter-organizations.html">Reporter Organizations</a></li>
</ul>
</li>
<li><a href="additional-reading.html">Additional Reading</a></li>
</ul>
</li>
<li><a href="final-thoughts.html">Final Thoughts</a></li>
</ul>
jQuery：
function toggleSubmenu()
if ($(this).hasClass('submenu-hidden'))
$(this).parent().children('ul').slideToggle();
$(this).removeClass().addClass('submenu-visible');
else if ($(this).hasClass('submenu-visible'))
$(this).parent().children('ul').slideToggle();
$(this).removeClass().addClass('submenu-hidden');
$('#lesson-sidebar ul ul').hide();
$('#lesson-sidebar ul ul ul').hide();
$('#lesson-sidebar ul:first-child').attr('id', 'rootlist');
$('#lesson-sidebar ul li:has("ul")').prepend('<span class="submenu-hidden"></span>').css('list-style','none');
$('#lesson-sidebar ul li a').each(
function()
if ($(this).hasClass('active'))
// if it is a UL
var length = $(this).parent().find("ul").length;
alert(length);
if (length == 0)
if ($(this).parent().parent().parent().children('span').hasClass('submenu-hidden'))
$(this).parent().parent().parent().children('ul').show();
$(this).parent().parent().parent().children('span').removeClass('submenu-hidden').addClass('submenu-visible');
if ($(this).parent().parent().parent().parent().parent().children('span').hasClass('submenu-hidden'))
$(this).parent().parent().parent().parent().parent().children('ul').show();
$(this).parent().parent().parent().parent().parent().children('span').removeClass('submenu-hidden').addClass('submenu-visible');
if (length == 1)
$(this).parent().find('ul').slideToggle();
$(this).parent().children('span').removeClass('submenu-hidden').addClass('submenu-visible');
);
$('ul#rootlist > li span, ul#rootlist li ul li > span').bind('click', toggleSubmenu);
非常感谢任何和所有帮助。
【问题讨论】：
【参考方案1】：$(this).closest("ul") 将遍历父母，直到找到ul
http://docs.jquery.com/Traversing/closest#expr
...通过测试元素本身并向上遍历其在 DOM 树中的祖先来获取与选择器匹配的第一个元素...
【讨论】：
【参考方案2】：如果我明白你想要做什么......你可以这样做：
// For my benefit, hide all lists except the root items
$('ul, li', $('#lesson-sidebar ul li')).hide();
// Show active parents and their siblings
$('li a.active').parents('ul, li').each(function()
$(this).siblings().andSelf().show();
);
// Show the active item and its siblings
$('li a.active').siblings().andSelf().show();
parents() 和 siblings() 方法都非常适合这种事情。
编辑：之前有一个错误，它没有显示父兄弟姐妹。试试这个新版本。
编辑 2：现在它可以在锚点上使用 class="active" 而不是列表项。
【讨论】：
这正是我想要的。父母的东西太棒了！！我找到了使用 :eq 方法的解决方案，但这更干净。唯一的问题是它不是 li.active，它是 a.active，所以我仍在努力让兄弟姐妹们展示。非常感谢：D 我刚刚将其更改为与 a.active 一起使用。如果可行，请记住投票并点击答案旁边的绿色复选标记。 :) 检查并投票赞成。您的快速而清晰的反应是一个巨大的帮助。【参考方案3】：为了简化 Lance McNeary 非常有用的答案，诀窍是使用：
.parents([selector])
给定一个代表一组 DOM 元素的 jQuery 对象， .parents() 方法允许我们搜索这些的祖先 DOM 树中的元素并从 从直接父级向上排序的匹配元素；要素 按从最近的父节点到外部父节点的顺序返回。
另一位用户建议：
.closest([selector])
类似于 .parents()，这可能是一个更好的选择，因为它一旦找到它正在寻找的元素就会停止。似乎在这种情况下它会更有效。 有关详细信息，请参阅http://api.jquery.com/closest/。 希望这有助于人们理解 .closest() 和 .parents() 之间的区别以及 jQuery 的强大和灵活。
【讨论】：
请不要重新表述其他答案。一个新的答案是带来一个新的想法。如果需要改进，请发表评论或提出修改建议。 我认为迈克尔的回答更简洁。当我无法理解 Lance 的答案时，它会有所帮助。【参考方案4】：这会给你第五个：
$(this).parents(':eq(4)');
【讨论】：
【参考方案5】：$(this).parents().get()[4] 会给你第五个
【讨论】：
【参考方案6】：试试这个代码行：
$(this).parent().parent().fadeOut();
【讨论】：
请为您的回答添加解释。以上是关于在 jQuery 中向上移动多个父级 - 更有效的方式？的主要内容，如果未能解决你的问题，请参考以下文章
jquery $(window).resize 事件在移动向上或向下滚动时触发