在 jQuery 中向上移动多个父级 - 更有效的方式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2053190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Moving up multiple parents in jQuery - more efficient way?
提问by Steph Rose
So, I have a navigation that is a list and has sublists and sublists.
所以，我有一个导航，它是一个列表，有子列表和子列表。
Basically, the nav is by default collapsed, but if people click on a page that's in a sublist, I want to show the parent list. And if it's a sublist of a sublist, I need both parent lists to show. I have it set up, but, I don't like putting 5 .parent().parent() 's to traverse upward to expand the list. Is there a more efficient way?
基本上，默认情况下导航是折叠的，但是如果人们单击子列表中的页面，我想显示父列表。如果它是子列表的子列表，我需要显示两个父列表。我已经设置好了，但是，我不喜欢将 5 个 .parent().parent() 向上遍历以扩展列表。有没有更有效的方法？
the HTML:
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>
The jQuery:
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);
Any and all help is majorly appreciated.
任何和所有的帮助都非常感谢。
采纳答案by Lance McNearney
If I understand what you're trying to do... you can do something like this:
如果我明白你想要做什么......你可以做这样的事情：
// 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();
The parents()and siblings()methods are both great for this kind of thing.
Edit: There was a bug before where it wasn't showing parent siblings. Try this new version.
编辑：之前有一个错误，它没有显示父兄弟姐妹。试试这个新版本。
Edit 2: Now it works with class="active" on the anchor instead of the list item.
编辑 2：现在它在锚点上使用 class="active" 而不是列表项。
回答by Alpha Codemonkey
$(this).closest("ul")will traverse the parents until it finds a ul
$(this).closest("ul")将遍历父母，直到找到一个 ul
http://docs.jquery.com/Traversing/closest#expr
http://docs.jquery.com/Traversing/closest#expr
...get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree...
...通过测试元素本身并在 DOM 树中向上遍历其祖先来获取与选择器匹配的第一个元素...
回答by Michael Schmid
To simplify Lance McNeary's very helpful answer, the trick is to use:
为了简化 Lance McNeary 非常有用的答案，诀窍是使用：
.parents([selector])
Given a jQuery object that represents a set of DOM elements, the .parents() method allows us to search through the ancestors of these elements in the DOM tree and construct a new jQuery object from the matching elements ordered from immediate parent on up; the elements are returned in order from the closest parent to the outer ones.
给定一个表示一组 DOM 元素的 jQuery 对象，.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先，并根据从直接父级向上排序的匹配元素构造一个新的 jQuery 对象；元素从最近的父元素到外部元素按顺序返回。
Another user suggested:
另一位用户建议：
.closest([selector])
Similar to .parents(), this may be a better choice as it stops once it finds the element it is looking for. Seems like it would be more efficient in this case. See http://api.jquery.com/closest/for more details. Hope this helps people understand the differences between .closest() and .parents() and how powerful and flexible jQuery can be.
与 .parents() 类似，这可能是更好的选择，因为它一旦找到要查找的元素就会停止。在这种情况下，似乎效率更高。有关更多详细信息，请参阅http://api.jquery.com/closest/。希望这有助于人们理解 .closest() 和 .parents() 之间的区别以及 jQuery 的强大和灵活。
回答by Danny Roberts
$(this).parents().get()[4]will give you the fifth
$(this).parents().get()[4]会给你第五个
回答by TroySteven
This will give you the fifth:
这将为您提供第五个：
$(this).parents(':eq(4)');
回答by Senol Kalayci
Try with this code line:
尝试使用此代码行：
$(this).parent().parent().fadeOut();
