javascript - Jqueryの位置はゼロを返します

Question

一部の要素にクラス「親」がある単純なリストがあります

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

div has text-align:justify;、ul has position:relative;、li hasdisplay: inline-block; position:relative;

次のコードを使用して、クラス「親」を持つすべての li の位置を取得します。次に、それらのいくつかにクラスを追加したいと思いますが、その位置は 100 未満です。

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

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

しかし、.position()ステップで常にゼロを返します（おそらく最初の位置.parentですか？）

どうすれば適切に機能し、クラスを持つすべてのliが正しい位置を返すようにできますか?

score 11 · Accepted Answer

位置に基づいて要素をフィルタリングし、 class を追加します。

$('.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