选择1级的子元素

我有以下的HTML结构选择1级的子元素

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


</div>

如何选择.x槽#el但只有当它的第一级？

#el > .x它不会工作，因为.X可以有其他的父元素：■

如果这是不可能的，我怎么会忽略有父母与某一类.X元素？

来源

2011-11-24 Alex

的措辞被绊倒了我。你想用#el来选择.x。但是，如果它是#el的直接后代，它应该只选择.x。任何更深的嵌套，你不希望它被选中。那是对的吗？换句话说，在你的样本中，应该选择NO级别为'x'的div，因为它们都不是#el的直接后代？ –

@GregPettit：我不认为这是什么意思，因为如果是这样，那么'#el> .x'会正常工作，因为它不会返回任何元素。但是你是对的，措辞中肯定有一些含糊不清的地方。 – RightSaidFred

你明白了。第一行暗示'#el> .x'会起作用。第二行说“那不行”。有矛盾;和'.x'是否有其他父元素似乎不相关。我只是不明白需要选择什么。 –

你想使用儿童（）命令的jQuery，因为它只是旅行了1级。

$（ “＃DIV报”）。儿童（ “X”）

这将正确选择它。

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

如果提供的jQuery代表了一组DOM元素，在。孩子（）方法允许我们通过直接孩子在DOM树中这些元素的搜索和构建新来自匹配元素的jQuery对象。 .find（）和.children（）方法与类似，只不过后者仅沿着DOM树中的单个级别传播。还要注意的是，像大多数jQuery方法一样，.children（）不会返回文本节点 ;要获得包括文本和注释节点的所有子节点，请使用.contents（）。

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

来源

2011-11-24 03:11:15

这将不起作用，因为#el没有班级'.x'的孩子。您可以通过添加一个额外的无效'.children（）'inline来获得与@jessegavin相同的结果。 –

所以你仍然可以做$（“＃el div”）。children（“。x”），它可以正常工作。几乎觉得这是值得减1;） –

我没有减去它。也就是说，减号通常意味着“这是错误的”，直到编辑。如果你不想比我更不慷慨的人减去它，在回答之前测试它。 ;-) –

您可以创建一个遍历所有的#el内.x元素，并返回其不具有与类的x祖先那些.x元素的功能。

这里的工作演示：http://jsfiddle.net/6AwcX/

function getTopLevelXElements() { 
    var xElements = []; 
    $("#el .x").each(function(i, el) { 
     if ($(el).parent().closest(".x").length == 0) 
      xElements.push(el); 
    }); 
    return $(xElements); 
}

来源

2011-11-24 03:09:00 jessegavin

问题是，父元素.x的数量可能是可变的...所以我不能这样做：（ – Alex

然后你可以使用'.el .x' ...所有'.x'在' .el'将被选中 –

是的，但是我不希望任何'.x' -x的孩子被选中...... – Alex

你可以做两个选择器。一个为得到，另一个为否定...

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

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

来源

2011-11-24 03:15:50

如果'＃el'的祖先恰好具有'x'类，这将不起作用。你需要在第二个选择器中包含'＃el'。 – RightSaidFred

我不明白，所以。你可以编辑？ –

辉煌。这是最好的答案。 – jessegavin

选择1级的子元素

回答

相关问题