计算多个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具有相同编号的位置

回答

相关问题