选择所有有班级的家长
Posted
技术标签:
【中文标题】选择所有有班级的家长【英文标题】：Select all parents with class 【发布时间】：2013-08-06 11:59:09 【问题描述】：如何选择具有一个特定类的所有父元素？ 例如：
<ul class="123">
<li>
<li>
<ul class="qwe">
<li>
<li>
<ul class="123">
<li class="select">
<li>
</ul>
</ul>
</ul>
如何根据具有类'select'的类'123'的li选择所有父ul元素？
【问题讨论】：
作为旁注。你知道 html 标记是无效的吗？ （不关闭li 标签。
@putvande 我认为这仅适用于 4.x 中的某些严格模式？不过我可能是错的 - 我不知道 HTML5 对 4 的“可选”结束标签有什么要求（，也许还有其他几个）
【参考方案1】：
这就是你要找的吗？
$('.select').parents('.123');
或者更具体的：
$('li.select').parents('ul.123');
【讨论】：
没关系，但.parent() 或 .closest("ul") 可能更有意义，因此它不会遍历整个 DOM 和/或可能返回比需要更多的父项
@Ian，我也不确定 OP 想要什么，但问题是“所有父母”......
@bfavaretto 这就是我评论的原因；我没有意识到实际的 HTML 结构是什么（我认为它是扁平的），所以未封闭的 <li> 元素让我失望:)【参考方案2】：
使用has() 方法的替代方法如何：
$("ul.123").has("li.select")
http://jsfiddle.net/6wB49/
has()
描述：将匹配元素集减少到具有 匹配选择器或 DOM 元素的后代。
【讨论】：
我认为这有可能减少工作量，同时实现所需（而不是使用.parents()）【参考方案3】：
jquery-class-selectors
$('ul[class="123"] li.select');
//Or
$('li.select').parents('ul.123');
【讨论】：
+1 用于返回 jQuery 类选择器页面的链接。哦，但是（现在）第一个示例不返回 ul 是吗？ 啊，是的。现在更新了 请敢于评论DOWNVOTERS。请解释一下。 我猜你的第一种方法的 b/c 或者因为[class="123"] 不如 .123 优雅【参考方案4】：
嗨，
你也可以试试这个....
<head runat="server">
<title></title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function ()
$('ul').bind('click', function ()
$(this).parent().each(function ()
alert($(this).attr('title'));
);
);
$('li').bind('onclick', function ()
$(this).parent().each(function ()
alert($(this).html());
);
);
);
</script>
</head>
<body>
<form id="form1" runat="server">
<div title="div">
<ul class="123" title="1111_1">
<li title="test_1">Test 1</li>
<li title="test_2">Test 2</li>
<ul class="qwe" title="qwe">
<li title="qwe_1">ABC 1</li>
<li title="qwe_2">ABC 2</li>
<ul class="123" title="123">
<li class="select" title="123_1">XYZ 1</li>
<li title="123_2">XYZ 2</li>
</ul>
</ul>
</ul>
</div>
</form>
</body>
</html>
谢谢， 维沙尔·帕特尔
【讨论】：
以上是关于选择所有有班级的家长的主要内容，如果未能解决你的问题，请参考以下文章