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

Question

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

在那张图片中，top: 在标题 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 轴的右侧)。