Question

我有以下HTML结构

<div id="el">
  ...
  <div>
    ... 
    <div class="x"> 
      ...
      <div>
        <div class="x"> 
         ...
        </div> 
      </div>
      ...
    </div>  
    ...
  </div>


</div>

如何通过.x选择#el，但仅限于第一级？

#el > .x它不起作用，因为.x可以有其他父元素：s

如果不可能，我怎么能忽略父母有某个类的.x元素呢？

Answer 1

你可以做两个选择器。一个用于获取，另一个用于否定...

$('#el .x').not('#el .x .x');

它可以工作。看看：http://jsfiddle.net/hPsY2/

Answer 2

您可以创建一个循环遍历.x内所有#el元素的函数，并返回那些没有祖先类.x的{{1}}个元素。

这是一个有效的演示：http://jsfiddle.net/6AwcX/

Answer 3

您可能希望对jQuery使用children（）命令，因为它只能向下移动1级。

$（“＃el div”）。children（“。x”）

这会正确选择它。

http://api.jquery.com/children/

给定一个表示一组DOM元素的jQuery对象，   .children（）方法允许我们搜索直接的孩子   DOM树中的这些元素并构造一个新的jQuery对象   来自匹配元素。 .find（）和.children（）方法是   类似的，除了后者只走一层   DOM树。还要注意，像大多数jQuery方法一样，.children（）可以   不返回文本节点;让所有孩子都包括文字和评论   节点，使用.contents（）。

该方法可选地接受相同类型的选择器表达式   我们可以传递给$（）函数。如果提供选择器，则   元素将通过测试它们是否匹配来过滤。

选择1级子元素

3 个答案: