样式下拉菜单：获取和求和兄弟元素的高度答案

【问题标题】：Styling Dropdown: Get and sum height of sibling elements样式下拉菜单：获取和求和兄弟元素的高度
【发布时间】：2016-09-28 04:39:34
【问题描述】：

我有这个动态标记，其中列表元素的数量由我的数据库定义，所以我永远不知道既不使用静态 ID 也不使用类来识别每个：

<ul>
  <li>element1</li>
  <li>element2</li>
  <li>element3</li>
  <li>element4</li>
  <li>element5</li>
  <li>element6</li>
</ul>

我需要能够编辑每个列表的 css 以便使用 "top:XXpx" 定位它，就像 this plugin does 但没有原型，也没有创建标记的所有函数，因为我已经有了标记

谢谢！

【问题讨论】：

欢迎来到 SO。请先尝试并询问社区。分享您的试用代码。

标签： javascript jquery css drop-down-menu dropdown

【解决方案1】：

你可以在 jquery 中用'ul li' 选择你的 li，然后给它你想要的任何 css

Demo

var top = 0;
var zIndex = $('ul li').length;
var width = 300;
var left = 0;
$('ul li').each(function(){
    top = top + 5;
    zIndex = zIndex - 1;
    width = width - 4;
    left =  left + 2;
    $(this).css('top', top+'px');
    $(this).css('z-index', zIndex);
    $(this).css('width', width+'px');
    $(this).css('left', left+'px');
 });

这里我只是添加了一些带有一些初始值的全局变量，并且在每个li 的循环中，我使用这些变量根据其顺序为每个 li 设置 css 属性。

举个例子：每一个都有顶部，从最后一个增加 3（除了 z-index，因为我希望最后一个具有较小的值，所以我从最大的数字开始（基于 li 元素数是动态的) 然后在每个元素中减少它）。

编辑：在 css 中提供元素 position:absolute; 很重要，以使其看起来像您想要的示例。

【讨论】：

@user3799253 检查一下，希望对您有所帮助。