選擇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級的子元素

回答

相關問題