Javascript 职位及；根据每个不同元素的位置和宽度将每个li元素居中

我有一个内联块行

s，在包装器内的页面上间隔开。下面我有一个绝对定位的

列表，我想在每个相应的

下居中放置

因此，我试图循环浏览

的列表，根据相应
的位置定位它们，并根据
的宽度将每个
居中于
下方

这有意义吗

这就是我所拥有的，但我的javascript/jquery知识恐怕不够：

// Loop over each li
$( ".group-labels li" ).each(function() {
    var id = $(this).data('bind');
    var theXPosition = $("#" + id).position.left;
    var theWidth = $("#" + id).innerWidth;  

    // Add margin-left to the li equivalent to .group's theXPosition
    $(this).css("margin-left") = theXPosition;

    // Centering <li>s with text-align: center in css and width of corresponding div set here
    $(this).css("width") = theWidth;

});

//在每个li上循环
$（“.group标签li”）.each（函数（）{
var id=$（this.data（'bind'）；
var theXPosition=$（“#”+id）.position.left；
var theWidth=$（“#”+id）；
//将左边距添加到li，相当于.group的theXPosition
$（this.css（“左边距”）=X位置；
//使用文本对齐对中
s：css中的中心和此处设置的相应div的宽度
$（this.css（“宽度”）=宽度；
});

我确信还有很多问题需要解决，但我特别不知道如何合并第二个循环来检索每个“.spectrum group”位置和内部宽度

任何指向正确方向的指示都是值得赞赏的

编辑->添加HTML:

        <div class="spectrum-wrap">
            <div class="spectrum">
                <div class="spectrum-group" id="spectrum-group1">
                    <span id="student1"></span>
                    <span id="student2"></span>
                    <span id="student3"></span>
                </div>
                <div class="spectrum-group" id="spectrum-group2">
                    <span id="student4"></span>
                    <span id="student5"></span>
                    <span id="student6"></span>
                    <span id="student7"></span>
                    <span id="student8"></span>
                    <span id="student9"></span>
                    <span id="student10"></span>
                    <span id="student11"></span>
                </div>
                <div class="spectrum-group" id="spectrum-group3">
                    <span id="student12"></span>
                    <span id="student13"></span>
                    <span id="student14"></span>
                    <span id="student15"></span>
                </div>
                <div class="spectrum-group" id="spectrum-group4">
                    <span id="student16"></span>
                    <span id="student16"></span>
                </div>
                <div class="spectrum-group" id="spectrum-group5">
                    <span id="student17"></span>
                    <span id="student17"></span>
                </div>
            </div><!-- .spectrum end -->
            <div class="spectrum-group-labels">
                <ul class="group-labels">
                    <li data-bind="spectrum-group1"><a href="#group1">Group 1</a></li>
                    <li data-bind="spectrum-group2"><a href="#group2">Group 2</a></li>
                    <li data-bind="spectrum-group3"><a href="#group3">Group 3</a></li>
                    <li data-bind="spectrum-group4"><a href="#group4">Group 4</a></li>
                    <li data-bind="spectrum-group5"><a href="#group5">Group 5</a></li>
                </ul>
            </div>
        </div>









首先，如果还使用
left
positioning属性，则任何绝对定位的对象都只尊重
左边距

在上面的代码中，每次通过循环时，xposition的值不是都相同吗？因此，即使左边的边距用于处理这些项目，您也将它们放在同一位置

jQuery非常灵活，但我认为.each（）的唯一有效参数是回调函数。但是您有未关闭的变量声明（
xposition
，
width
），后面是回调函数。只是输入错误？
循环中不需要
函数
，元素
此
需要引用循环中的
li
元素，如果在其周围封装函数，该元素将不再工作

但是，该函数需要作为
.each（）
的参数，因为它是一个回调函数（为每个
li
元素执行）

更新：

如果您想使位置适应group元素，我建议您通过添加属性（例如
dataset
属性）链接这两个项目

向每个
li
元素添加以下属性：
data bind=“ID”
其中
ID
将是组容器的
ID

因此，工作代码应为：

// Loop over each li
$( ".group-labels li" ).each(function() {
    var id = $(this).data('bind');
    var theXPosition = $("#" + id).position().left;
    var theWidth = $("#" + id).width();  

    // Add margin-left to the li equivalent to .group's theXPosition
    // And centering <li>s with text-align: center in css and width of corresponding div
    $(this).css({"left": theXPosition, "width": theWidth});

});

//在每个li上循环
$（“.group标签li”）.each（函数（）{
var id=$（this.data（'bind'）；
var theXPosition=$（“#”+id）.position（）.left；
var theWidth=$（“#”+id）.width（）；
//将左边距添加到li，相当于.group的theXPosition
//并使用文本对齐对中
s：css中的中心和相应div的宽度
$（this.css（{“left”：theXPosition，“width”：theWidth}）；
});
如果我理解正确


$（文档）.ready（函数（）{
var组=$（“.spectrum组”）；
$（“.group标签li”）。每个（函数（索引，el）{
var组=组。等式（指数），
pos=组偏移量（）。左侧，
宽度=group.outerWidth（）；
//控制台日志（''，索引，'\t'，位置，'\t'，宽度）；
$（el）.css（{“左边距”：位置，“宽度”：宽度}）；
});
});
.spectrum{宽度：100%；}
.频谱组{浮动：左；宽度：20%；}
.spectrum group>span{显示：块；文本对齐：中心；}
.光谱组：第n个类型（偶数）{背景色：#eee；}
.group标签{左填充：0；宽度：100%；列表样式类型：无；}
.group labels>li{文本对齐：居中；}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
16
17
17







请添加html，我刚刚添加了很多语法错误（jquery）。很好，这修复了我的
。每个
语法（上面编辑过），但是