Question

我在一个包装器内的页面上间隔了一行<div>的内联块行。在下面，我有一个绝对定位的<li>列表，我希望将它们放在每个相应的<div>下。

因此，我尝试遍历<li>列表，根据相应<div>的位置定位它们，并将每个<li>置于<div>下方{ {1}}基于<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;

});

我确信还有更多需要修复的内容，但我特别无法弄清楚如何合并第二个循环以检索每个＆＃34; .spectrum-group＆＃34;位置和内部宽度。

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

编辑 - ＆gt;添加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});

});

Answer 2

嗯，对于初学者来说，如果它也使用margin-left定位属性，那么任何位置绝对只会尊重left。

在上面的代码中，您是否每次都要通过循环获得theXPosition的相同值？因此，即使margin-left正在处理这些项目，您也可以将它们放在同一个位置。

jQuery非常灵活，但我对.each（）唯一有效的参数是回调函数。但是你有未公开的变量声明（theXPosition，theWidth），后跟一个回调函数。只是一个错字？

Answer 3

如果我理解正确

$(document).ready(function(){
  var groups = $(".spectrum-group");
  
  $( ".group-labels li" ).each(function(index, el) {
    var group = groups.eq(index),
        pos = group.offset().left,
        width = group.outerWidth();
    //console.log(' ',index,'\t',pos, '\t',width);

    $(el).css({"margin-left": pos, "width": width});
  });
});

.spectrum{width: 100%;}
.spectrum-group{float: left; width: 20%;}
.spectrum-group > span{display: block; text-align: center;}
.spectrum-group:nth-of-type(even){background-color: #eee;}
.group-labels{padding-left: 0; width: 100%; list-style-type: none;}
.group-labels > li{text-align: center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="spectrum-wrap">
            <div class="spectrum">
                <div class="spectrum-group" id="spectrum-group1">
                    <span id="student1">1</span>
                    <span id="student2">2</span>
                    <span id="student3">3</span>
                </div>
                <div class="spectrum-group" id="spectrum-group2">
                    <span id="student4">4</span>
                    <span id="student5">5</span>
                    <span id="student6">6</span>
                    <span id="student7">7</span>
                    <span id="student8">8</span>
                    <span id="student9">9</span>
                    <span id="student10">10</span>
                    <span id="student11">11</span>
                </div>
                <div class="spectrum-group" id="spectrum-group3">
                    <span id="student12">12</span>
                    <span id="student13">13</span>
                    <span id="student14">14</span>
                    <span id="student15">15</span>
                </div>
                <div class="spectrum-group" id="spectrum-group4">
                    <span id="student16">16</span>
                    <span id="student16">16</span>
                </div>
                <div class="spectrum-group" id="spectrum-group5">
                    <span id="student17">17</span>
                    <span id="student17">17</span>
                </div>
            </div><!-- .spectrum end -->
            <div class="spectrum-group-labels">
                <ul class="group-labels">
                    <li><a href="#group1">Group 1</a></li>
                    <li><a href="#group2">Group 2</a></li>
                    <li><a href="#group3">Group 3</a></li>
                    <li><a href="#group4">Group 4</a></li>
                    <li><a href="#group5">Group 5</a></li>
                </ul>
            </div>
        </div>

位置＆amp;根据每个不同元素的位置和宽度对每个li元素进行居中

3 个答案: