Javascript 选择具有类的所有父级_Javascript_Jquery_List_Select_Jquery Selectors

Javascript 选择具有类的所有父级

javascript jquery list select

Javascript 选择具有类的所有父级,javascript,jquery,list,select,jquery-selectors,Javascript,Jquery,List,Select,Jquery Selectors,如何选择具有一个特定类的所有父元素？例如： <ul class="123"> <li> <li> <ul class="qwe"> <li> <li> <ul class="123"> <li class="select"> <li> </ul> </

如何选择具有一个特定类的所有父元素？例如：

<ul class="123">
  <li>
  <li>
    <ul class="qwe">
      <li>
      <li>
        <ul class="123">
          <li class="select">
          <li>
        </ul>
    </ul>
</ul>

我如何根据具有类“123”的类“select”的li选择所有父ul元素？

这就是您要寻找的吗

$('.select').parents('.123');

或者更具体地说：

$('li.select').parents('ul.123');

使用

has（）

方法的替代方案如何：

$("ul.123").has("li.select")

说明：将匹配元素集减少为具有与选择器或DOM元素匹配的子体

你好，

你也可以试试这个

<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>


$（文档）.ready（函数（）{
$（'ul'）.bind（'click'，函数（）{
$（this）.parent（）.each（函数）（）{
警报（$（this.attr（'title'））；
});
});
$（'li'）.bind（'onclick'，function（）{
$（this）.parent（）.each（函数）（）{
警报（$（this.html（））；
});
});
});

测试1
测试2

ABC 1
ABC 2

XYZ 1
XYZ 2

谢谢你，
Vishal Patel

仅作为旁注。你知道HTML标记是无效的，对吗？（没有关闭

li

标记。@putvande我以为这只适用于4.x中的一些严格模式？但我可能错了-我不知道HTML5需要什么，因为4的“可选”关闭标记（，可能还有一些其他）+1才能链接回jQuery的类选择器页面。哦，但是（现在）第一个例子没有返回ul，是吗？啊，是的。现在它被更新了。请敢于评论下一个投票者。请解释。我猜它的b/c是您使用的第一个方法，或者是因为

[class=“123”]

不如

.123

优雅，这并不重要，但

.parent（）

或

最近的（“ul”）

可能更有意义，因此它不会遍历整个DOM和/或可能返回比needed@Ian，我也不确定OP想要什么，但问题是“所有家长”…@bfavaretto这就是我发表评论的原因；我不知道实际的HTML结构是什么（我认为它是平面的），因此未关闭的

元素使我感到厌烦：）我认为这有可能减少工作量，同时实现所需的功能（而不是使用

.parents（）

）

<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>