2016-12-07 107 views
-1

什麼,我試圖做的是查找是否一個元素被其他元素與第一元素的只是ID重疊

<!DOCTYPE html> 
<html> 
<head> 
    <title>Demo Stacked Elements</title> 
</head> 
<body> 
<div id="abc" style="height: 200px;width: 300px;position: absolute;"> 
    <img src="http://d1s9j44aio5gjs.cloudfront.net/2015/11/Duckling_Award_1_Learn_to_Swim.gif" style="height: 200px;width: 300px;"> 
</div> 
<div id="def" style="height: 400px;width: 400px;border:1px solid yellow;position: absolute;"> 
    <br/> 
    <img src="http://media.148apps.com/screenshots/586083949/us-ipad-3-the-ugly-duckling-by-andersen-an-interactive-childrens-story-and-learning-game.jpeg" style="height: 100px;width: 200px;"> 
</div> 
</body> 
</html> 

考慮這樣一個網頁,我只知道第一個元素的ID是ABC,我想檢查abc是否被頁面上的任何其他元素重疊或者不是,並且如果它確實位於該div的前面或後面

要做到這一點我不想使用循環,我正在尋找一個簡單而有效的低成本操作,可以讓我回答div是否符合上述條件或不符合

回答

1

我認爲最好使用元素的父屬性。 E.g:

var element = $("#abc").parent(); 
 
//console.log("Parent Element:",element[0]['nodeName']) 
 
if(element[0]['nodeName']=='BODY'){ 
 
    $('.abc').html('ABC element is not overlapped under any element'); 
 
} 
 

 
var element =($("#abc-child").parent()); 
 
//console.log("Parent Element:",element) 
 
if(element[0]['nodeName']!='BODY'){ 
 
    $('.abc-child').html('ABC-Child element is overlapped under <b>"'+element[0]['id']+'"</b> element'); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="abc" style="height: 100px;width: 100px;background-color:red;float"> 
 
    <div id="abc-child" style="height: 50px;width: 50px;background-color:black">  
 
    </div> 
 
</div> 
 

 
<p class="abc"></p> 
 
<p class="abc-child"></p>

+0

不錯的答案.........但我想知道是否ABC被其他元素重疊與否。你可以建議我一些關於它的提示 –

+0

我們的主代碼從BODY標籤開始,所以我們可以將其視爲父DOM。如果我們檢查是否有任何DOM有父母身體,那麼他沒有任何其他元素重疊 – vijay

+0

請檢查更新後的代碼,我在哪裏顯示div div。 – vijay

相關問題