計算多個div具有相同編號的位置

我有一個小問題。
我有多個具有相同ID的div，我想要做的是當我將鼠標懸停在div上時，它將在高度上展開。但是當它出現問題時，它會將其他分區壓低。計算多個div具有相同編號的位置

所以我想到了一個jQuery的解決方案，如果我可以計算當前元素的位置，當我將鼠標懸停在它上面時，則可以使用這些值並將div更改爲position：absolute與這些值。並在鼠標離開時回到正常狀態。現在的問題是，當我將鼠標懸停在標記上時，它只計算第一個div在標記中的位置。當我將鼠標懸停在其他人身上時，它並不計算。

我不想用不同的ID /班級數目的div，因爲這將是一個自動化系統與新的div添加等

也許可以用另一種方式來完成？即時通訊相當新的jQuery，所以這就是我想出的。

牆上的文字對不起D：任何幫助表示讚賞！

標記`

<div id="content-element"> 
     <div class="element-container"> 
      <div class="top-info"> 
       <img src="phone-placeholder.png" alt="placeholder" width="65px" height="58px"/> 
       <div class="bg-circle"></div> 
       <h3>eerste maand</h3> 
       <span><h4>&#8364;12.5</h4></span> 
       <h3>Daarna</h3> 
       <span><h4>&#8364;12.5</h4></span> 
      </div> 
      <p>Telefoon abonemment met Telefoon</p> 
      <p><span>100</span> Bel & SMS <span>500mb</span></p> 
      <p><span> Jr</span> telefoon abonnement</p> 
      <p>Prijs Telefoon: <span>Gratis</span></p> 
      <p>Telefoon abonemment met Telefoon</p> 
      <p><span>100</span> Bel & SMS <span>500mb</span></p> 
      <p><span> Jr</span> telefoon abonnement</p> 
      <p>Prijs Telefoon: <span>Gratis</span></p> 
      <p>Telefoon abonemment met Telefoon</p> 
      <p><span>100</span> Bel & SMS <span>500mb</span></p> 
      <p><span> Jr</span> telefoon abonnement</p> 
      <p>Prijs Telefoon: <span>Gratis</span></p> 
     </div> 
    </div><!-- end content-element--> 
</div><!-- end content-container -->`

jQuery的

$('#content-element').mouseenter(function() { 
     var $positionTop = $(this).children('.element-container').position().top; 
     var $positionLeft = $(this).children('.element-container').position().left; 
     console.log($positionTop); 
     console.log($positionLeft); 
}); 
$('#content-element').mouseleave(function() { 
     var $positionTop = $(this).children('.element-container').position().top; 
     var $positionLeft = $(this).children('.element-container').position().left; 
     console.log($positionTop); 
     console.log($positionLeft); 
});

來源

2012-07-19 Rick Lancee

從來沒有使用相同ID的多個元素。這在現實世界中是非法的，在HTML中應該是非法的。 – SomeShinyObject 2012-07-19 12:27:20

使用CSS和設置的位置是：絕對的;在div上

#yourDIVid {

position：absolute;

}

來源

2012-07-19 12:27:42

這不是我想要的，divs漂浮在eachother旁邊，我想將鼠標懸停在當前div上時將其改爲絕對。這樣他們就可以在不推動其他股票的情況下擴張。 – 2012-07-19 12:31:09

您是否嘗試過z-index屬性？就像您懸停時一樣，您將z-index設置爲比您不想移動的div更大的值。或者你可以嘗試設置位置：絕對你不想被移動的div。或嘗試位置：固定;那麼他們肯定不會移動:) – 2012-07-19 12:32:47

我沒有我會試試這個。 – 2012-07-19 12:34:31

首先，不應該有具有相同ID的多個塊。

但是，如果你要選擇具有相同id的多個div你可以使用

$('div#content-element') 
OR 
$('body').find('#content-element')

來源

2012-07-19 13:18:42

計算多個div具有相同編號的位置

回答

相關問題