javascript - jQuery li 位置返回零

Question

我有一个简单的列表，其中一些元素具有“父级”类

<div>
    <ul>
        <li class="parent">text</li>
        <li>text</li>
        <li class=parent>text</li>
        <li>text</li>
    </ul>
</div>

div有ul有li有text-align:justify;_ _position:relative;display: inline-block; position:relative;

我使用以下代码来获取每个 li 类“父级”的位置。然后我想为其中一些添加类，其中位置小于 100。

var position = $('.parent').position();

if (position.left < 100) {
    $('.parent').addClass('left');
}

但它总是在.position()一步返回零（可能是第一个的位置.parent？）

我怎样才能让它正常工作，让每一个有类的 li 返回正确的位置？

score 11 · Accepted Answer

根据位置过滤元素，并添加类：

$('.parent').filter(function() {
   return $(this).position().left < 100;
}).addClass('left');

score 2 · Accepted Answer

你是对的，它抓住了第一个父母的位置。

你可以做这样的事情

$(".parent").each(function() {
    if ( $(this).position().left < 100 )
         $(this).addClass('left');
});

score 1 · Accepted Answer

可以使用回调addClass

$('.parent').addClass(function() {
    return $(this).posiition().left <100 ?'left':'';
})

您使用的方法的问题var position = $('.parent').position();是它只会返回集合中第一个元素的值，而不是选择器的每个实例

3 回答 3