Jquery li位置返回零

Question

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

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

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

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

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

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

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

如何让它正常运作并使每个班级的人回到正确的位置？

Answer 1

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

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

Answer 2

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

你可以做这样的事情

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

Answer 3

可以使用addClass

的回调

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

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