样式下拉列表:获取兄弟元素的高度并求和

Styling Dropdown: Get and sum height of sibling elements

本文关键字：高度 求和 元素 兄弟 下拉列表 获取 样式      更新时间：2023-09-26

我有这个动态标记，其中列表元素的数量是由我的DB定义的，所以我永远无法知道使用静态id或类来识别每个元素:

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

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

谢谢!

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

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元素的数量是动态的)，然后在每个元素中减少它)。

编辑:给元素position:absolute;在css是重要的，使它看起来像你想要的例子。

相关文章：