javascript - 根据每个不同元素的位置和宽度定位和居中每个 li 元素

Question

我有一个行内 block 行 <div> s 在 wrapper 内跨页隔开。在下面我有一个绝对定位的列表 <li>我想在它们相应的 <div> 下居中

所以，我试图遍历 <li> 的列表s，根据对应的<div>的位置定位他们, 并将每个 <li> 居中低于<div>基于 <div>宽度。

这有意义吗？

这就是我所拥有的，但是我的 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;

});

我确信还有很多需要修复的地方，但我尤其想不出如何合并第二个循环来检索每个“.spectrum-group”位置和 innerWidth。

非常感谢任何指向正确方向的指示。

编辑 -> 添加 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>

Answer 1

您不需要 function在你的循环和元素内 this需要引用li循环中的元素，如果围绕它包装一个函数，它将不再起作用。

然而，该功能需要作为您的 .each() 的参数因为它是一个回调函数(为每个 li 元素执行)。

更新:

如果您想调整位置以适应组元素，我建议您通过添加一个属性(例如 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});

});