[英]how to get the div id of a specific level of DOM?
考慮我的HTML頁面是這樣的
<html>
<body>
<div id = "mainDiv">
<div id = "levelOne1">
<div id="levelTwo1">
<div id = "levelThree1">
third level html content over here
</div>
</div>
<div id="levelTwo2">
second level html content over here
</div>
</div>
<div id = "levelOne2">
second level html content over here in levelOne2
</div>
<div id = "levelOne3">
<div id="innerdiv">
second level html content over here in levelOne3
</div>
</div>
</div>
</body>
</html>
並且js中的此函數返回您從中選擇文本的位置的相應父級的ID
function getSelectionParentElement() {
var parent = null,
selection;
if (window.getSelection) {
selection = window.getSelection();
if (selection.rangeCount) {
parent = selection.getRangeAt(0).commonAncestorContainer;
if (parent.nodeType !== 1) {
parent = parent.parentNode;
}
}
} else if ((selection = document.selection) && selection.type !== "Control") {
parent = selection.createRange().parentElement();
}
return parent;
}
如果我從此html頁面的third level html content over here選擇了一些文本后調用了此代碼，則在任何點擊功能下，我將該代碼寫為
var divElement = getSelectionParentElement();
var divID = divElement.getattribute('id');
其中divID作為levelThree1獲得。
但是我想要的是對應的二級div的id，即levelOne1
讓我清楚一點， 我一直想要各自第二級div的ID
所以如果我從這段文字中選擇一些東西
second level html content over here
我仍然希望id為levelOne1
如果我從此文本中選擇詳細信息
second level html content over here in levelOne2
div ID應該是levelOne2
如果選擇此文本
second level html content over here in levelOne3 的 second level html content over here in levelOne3 ，div ID應為levelOne3
有什么辦法可以做到嗎？
我們可以概括一下嗎？ 像第二層，第三層等等？
只需使用通用函數即可：
function getIdByLevel(level){ var element = $("#mainDiv"); // <- set the container in which you're searching for (var i = 0; i < level; i++){ element = $(element).find("div")[0]; // <- the first div in each level is being taken } $("#res").html("id is: " + element.id); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="mainDiv"> <div id="levelOne1"> <div id="levelTwo1"> <div id="levelThree1"> third level html content over here </div> </div> <div id="levelTwo2"> second level html content over here </div> </div> <div id="levelOne2"> second level html content over here in levelOne2 </div> <div id="levelOne3"> <div id="innerdiv"> second level html content over here in levelOne3 </div> </div> </div> <br/><br/> <button onClick="getIdByLevel(1);">Get Level 1 Id</button> <button onClick="getIdByLevel(2);">Get Level 2 Id</button> <button onClick="getIdByLevel(3);">Get Level 3 Id</button> <div id="res"></div>
如果我很好理解，您可以使用子節點。
var divElement = getSelectionParentElement();
var secondDiv = divElement.getElementsByTagName('div')[1];
var divID = secondDiv.getattribute('id');
我將secondDiv分隔為一個新變量以使其清楚。 但是您可以全部寫在一行中。 另外，您可以使用'.children [1]'代替'.getElementsByTagName（'div'）[1]'，不同之處在於childs [1]將在divElement中獲得第二個孩子，無論它是div還是p或另一種元素。
另一個選擇可能是在jQuery中使用“：nth-child（n）”偽類。
您可以通過在第二級元素中添加特定的類來實現。 例如，將類“ second-level-element”添加到所有第二級元素。 在您的情況下，您可以將ID為levelOne1，levelOne2，levelThree的類“ second-level-element”添加到div中。
然后執行此操作以檢查所選元素是哪個第二級元素的后代：
考慮到“ elem”已被選中，
function getSecondLevelElement(elem) {
while (elem = elem.parentNode) {
if (elem.className == "second-level-element") {
return id = elem.id;
}
}
}
然后通過傳遞其文本被選擇為參數的元素來調用此函數。
感謝@Mukesh Patil，我實現了相同的目標
function getSecondLevelElement(elem) {
var immediateId = new Array();
var i =0;
while (elem = elem.parentNode) {
if(elem.getAttribute('id')==="mainDiv")
{
console.log(elem.getAttribute('id')+" <> "+i);
break;
}
immediateId[i] = elem.getAttribute('id');
i=i+1;
}
return immediateId[i-1];
}
如何通過 DOM get 方法獲取父 div 的特定子項？
[英]How To get the specific child of the parent div using by DOM get method?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.