选择所有有班级的家长答案

【问题标题】：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 的“可选”结束标签有什么要求（，也许还有其他几个）

标签： javascript jquery list select jquery-selectors

【解决方案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>

谢谢，维沙尔·帕特尔

【讨论】：