2009-06-10 35 views
75

如何从这样的列表中选择仅父级<ul>的链接元素?只在jquery中选择第一级元素

<ul> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a> 
    <ul> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    </ul> 
</li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
在CSS ul li a

所以,但不ul li ul li a

感谢

回答

88
$("ul > li a") 

但你需要设置根UL A类,如果你特别想定位的最外层ul:

<ul class="rootlist"> 
... 

然后,它的:

$("ul.rootlist > li a").... 

确保你只有根li元素的另一种方式:

$("ul > li a").not("ul li ul a") 

它看起来缺憾,但它应该做的伎俩

+0

嗯我发现我的问题是使用jQuery 1.2。我用1.3代替了它,现在这些选择器工作正常。非常感谢您的回复以及所有回复的人。 – aston 2009-06-10 20:33:18

+0

如果你不想添加一个类只需做$(“ul:first> li a”),那么显然这只适用于第一级,而不是内部级。 – Alfonso 2013-09-11 15:18:07

+0

$(“ul> li a”)。not(“ul li ul a”)它的工作正常。 – vicky 2016-06-28 10:07:09

44

一旦你有最初的ul,你可以使用children()方法,它只会考虑元素的直接子元素。正如@activa指出的那样,轻松选择根元素的一种方法是给它一个类或一个id。以下假设您有一个根号ul,其ID为root

$('ul#root').children('li'); 
+1

谢谢,这对我很有帮助。也可以使用`$('ul')。first()。children('li')` – 2014-09-30 22:05:29

0

您也可以使用$("ul li:first-child")来获得UL的直接子女。

我同意,但你需要一个ID或其他东西来标识主要的UL,否则它将只选择它们。如果你有与周围的UL ID的DIV最容易做的事情将是$("#someDiv > ul > li")

+2

这是`:first-child`的不正确用法。这将选择每个“ul”的第一个“li”。原来的帖子是从第一个“ul”开始要求“每个”li“。” – 2012-01-11 15:14:37

-1
.add_to_cart >>> .form-item:eq(1) 

在树级别的孩子从.add_to_cart第二.FORM项

+0

这对于 – renke 2016-07-19 20:36:42

3

你可能想试试这个如果结果仍然流向孩子,在许多情况下,JQuery仍然适用于儿童。

$("ul.rootlist > li > a") 

使用这种方法: E> f匹配任意F元素是一个元素E.

告诉jQuery来只寻找明确的孩子的孩子。 http://www.w3.org/TR/CSS2/selector.html

7

正如其他答案所述,最简单的方法是唯一标识根元素(通过ID或类名)并使用直接后代选择器。

$('ul.topMenu > li > a') 

不过,我碰到这个问题寻找一个解决方案,将在不同深度DOM的未命名元素的工作来了。

这可以通过检查每个元素并确保它在匹配元素列表中没有父项来实现。这里是我的solution,包裹在一个jQuery选择器'最上面'。

jQuery.extend(jQuery.expr[':'], { 
    topmost: function (e, index, match, array) { 
    for (var i = 0; i < array.length; i++) { 
     if (array[i] !== false && $(e).parents().index(array[i]) >= 0) { 
     return false; 
     } 
    } 
    return true; 
    } 
}); 

利用这一点,解决了原来的职位是:

$('ul:topmost > li > a') 

// Or, more simply: 
$('li:topmost > a') 

完整的jsfiddle提供here

0

试试这个:

$("#myId > UL > LI") 
0

我遇到了一些麻烦,从任何深度嵌套类,所以我想通了这一点。这将只选择它遇到一个包含jQuery对象的第一级:

var $elementsAll = $("#container").find(".fooClass");4 
 

 
var $levelOneElements = $elementsAll.not($elementsAll.children().find($elementsAll)); 
 

 
$levelOneElements.css({"color":"red"})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="fooClass" style="color:black"> 
 
Container 
 
    <div id="container"> 
 
    <div class="fooClass" style="color:black"> 
 
     Level One 
 
     <div> 
 
     <div class="fooClass" style="color:black"> 
 
      Level Two 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="fooClass" style="color:black"> 
 
     Level One 
 
     <div> 
 
     <div class="fooClass" style="color:black"> 
 
      Level Two 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>