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

fastest way to find and element at a specific location in the parent

本文关键字：元素 方法 查找 定位 位置      更新时间：2023-09-26

我有一个横向列表

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

该列表可在水平方向(左/右)移动。每个项目的宽度是随机的!

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

更新:作为一个额外的问题，如何删除在jsfiddle中看到的item s之间的空格?

附加问题的答案:删除列表项元素之间的空格。当列表项(或任何东西)被内联时，它们被视为文本，它们之间的空白创建了一个实际的空间。删除它们的唯一方法(除了使用其他方法，如浮动)是删除一个结束标记和另一个开始标记之间的空格。

当我需要内联列表没有空格时，我经常做的是将结束的li移到开始的li之前。它看起来不是很好，但我认为它是最清晰的可用选项。

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

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

我在这里创建了一个更新的提琴: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调整代码。这应该会让你对技术本身有一个概念。

这是一种方法，根据从项目中间到中间偏移量的距离(由您在注释中提供)对项目进行排序，然后获得第一个项目

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");

另外，根据在评论中提供的问题的答案，修复了您在小提琴中的空间问题。

相关文章：