jquery - 使用jQuery根据其他元素动态定位元素

Question

我想使用 jQuery 在包含 h3 的 div 上动态设置顶部位置。链接是我想要完成的图像。

在那张图片中，顶部：标题上的 div（绿色 h3s）是绝对定位的，硬编码顶部为 590。如果锦标赛规模从未改变（8、4、2、1），这很有效——但有些锦标赛只有两轮（3场比赛），标题明显落在页面下方。

在括号中，我在每个中间点添加了 round-title-before 和 round-title-after 类，因此我可以看到/指示它们之间要显示一个标题。

有没有办法用 .position() 或 .height() 计算 .round-title-before 和 .round-title-after 之间的差异，以正确定位#title div，使其始终居中或靠近中心有多少或几场比赛？附上第二张图片作为小型锦标赛的示例。

大型赛事：

=========================

小型比赛：

Answer 1

在我看来，您应该结合使用 jqueryui 的位置功能并将每个括号放入容器中。容器的高度将等于总高度，您可以使用上述 jqueryui 位置功能相对于容器垂直居中（我想在 x 轴的右侧）。