Question

我有这个水平的项目列表

<section class="viewport">
    <ul class="item-list">
        <li class="item">A</li>
        <li class="item">B</li>
        ...
    </ul>
</section>

列表可在水平方向（左/右）移动。结帐此jsfiddle每个项目都是随机宽度！

现在，假设移动了item-list元素。问题是，哪个item位于视口的中间？一个可能的解决方案（未经测试）是计算每个元素的偏移量，减去运动等等。但是性能非常重要，所以我想知道是否有人知道更好的解决方案？

更新：作为奖励问题，如何删除item之间的空格。正如在jsfiddle中看到的那样？

Answer 1

奖励问题的答案：删除列表项元素之间的空格。当列表项（或任何内容）被内联时，它们被视为类似文本，因为它们之间的空白创建了一个实际的空间。删除它们的唯一方法（除了使用不同的方法，如浮动）是删除一个结束标记和另一个的开始标记之间的空格。

当我需要内联列表没有空格时，我经常做的是在开始li之前移动关闭li。它看起来并不是很棒，但我认为它是最清晰的选择。

<ul>
    <li>A
    </li><li>B
    </li><li>C
    </li><li>D
    </li>
</ul>

至于找出中间元素，遍历列表，添加每个项目的宽度，直到UL的widthSum +偏移量大于视口宽度的一半。

我在这里创建了一个更新的小提琴：http://jsfiddle.net/x9v3W/5/

以下是基本代码：

var width = 0,
    targetWidth = $('.viewport').width(),
    offset = $('.item-list').offset().left,
    $item = $('.item-list :first-child');

while ($item && width + offset < targetWidth / 2) {
    width += $item.width();
    $item = $item.next();
}

alert($item.prev().text());

请注意，此代码并未考虑所有内容（如边框，填充，边距等），因此您可能需要调整最终使用的确切HTML代码。这应该让你了解技术本身。

Answer 2

这是一种方法，根据从项目中间到中间偏移的距离（由你在评论中提供）对项目进行排序，然后得到第一项。

http://jsfiddle.net/x9v3W/6/

middleOffset = 400; // precalculated, from comments

middleItem = $(".item").get().sort(function(a,b){
    var $a = $(a), $b = $(b);
    var aDiff = Math.abs(($a.offset().left +$a.width()/2) - middleOffset);
    var bDiff = Math.abs(($b.offset().left +$b.width()/2) - middleOffset);
    return aDiff == bDiff ? 0 : aDiff > bDiff ? 1 : -1;
});
$(middleItem).css("background-color","blue");

此外，根据评论中提供的问题的答案，将您的空间问题修复为小提琴。

在父级中的特定位置查找和元素的最快方法

2 个答案: