同じトップポジションを持つスパンの色を変更する方法

Question

スパンで構成される段落内の同じ兄弟要素ではなく、同じトップ位置を持つスパンの色を変更するにはどうすればよいですか？

私はspanタグによって生成された段落をしたとする良い方法だろう何.active

の追加クラスにspan持っているspanのラインの色を変更する方法を見つけ出すために始めていますこれを達成する？すべての

var next = $(".active").next(); 
 
var prev = $(".active").prev(); 
 

 
var activeWord = $(".active"); 
 
while ((next.position().top && prev.position().top) === activeWord.position().top) { 
 
    next.css({ 
 
    color: "red" 
 
    }); 
 
    prev.css({ 
 
    color: "red" 
 
    }); 
 
}

.word { 
 
    font-family: arial, sans-serif; 
 
    font-size: 14px; 
 
    line-height: 1.25em; 
 
} 
 
.active { 
 
    color: red; 
 
} 
 
.active-row { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 

 
<div class="content"> 
 
    <span class="word">Lorem</span> <span class="word">ipsum</span> <span class="word">dolor</span> <span class="word">sit amet</span> <span class="word">consectetur</span> <span class="word">adipiscing</span> <span class="word">elit</span> <span class="word">sed</span> 
 
    <span 
 
    class="word">do</span> <span class="word">eiusmod</span> <span class="word">tempor</span> <span class="word">incididunt</span> <span class="word">ut</span> <span class="word">labore</span> <span class="word">et</span> <span class="word">dolore</span> <span class="word">magna</span> 
 
    <span 
 
    class="word">aliqua</span> <span class="word">Ut</span> <span class="word">enim</span> <span class="word">ad</span> <span class="word">minim</span> <span class="word">veniam</span> <span class="word">quis</span> <span class="word">nostrud</span> <span class="word">exercitation</span> 
 
     <span 
 
     class="word">ullamco</span> <span class="word">laboris</span> <span class="word">nisi</span> <span class="word">ut</span> <span class="active word">aliquip</span> 
 
     <span class="word">ex</span> <span class="word">ea</span> <span class="word">commodo</span> <span class="word">consequat</span> <span class="word">Duis</span> <span class="word">aute</span> <span class="word">irure</span> <span class="word">dolor</span> 
 
     <span 
 
     class="word">in</span> <span class="word">reprehenderit</span> <span class="word">in</span> <span class="word">voluptate</span> <span class="word">velit</span> <span class="word">esse</span> <span class="word">cillum</span> <span class="word">dolore</span> <span class="word">eu</span> 
 
      <span 
 
      class="word">fugiat</span> <span class="word">nulla</span> <span class="word">pariatur</span> <span class="word">Excepteur</span> <span class="word">sint</span> <span class="word">occaecat</span> <span class="word">cupidatat</span> <span class="word">non</span> 
 
      <span 
 
      class="word">proident</span> <span class="word">sunt</span> <span class="word">in</span> <span class="word">culpa</span> <span class="word">qui</span> <span class="word">officia</span> <span class="word">deserunt</span> <span class="word">mollit</span> <span class="word">anim</span> 
 
       <span 
 
       class="word">id</span> <span class="word">est</span> <span class="word">laborum</span> 
 
</div>

Answer 1

まず(next.position().top && prev.position().top)だけでtrueまたはfalseにつながるので、あなたは同時に、前と次の要素をチェックすべきではない（とあなたのコードでもこれをやっていませんでした） - 要素は同じ行に1つの兄弟しか持たず、前の行または次の行にもう1つの兄弟しか持たないからです。

第2に、を先読みし、次の繰り返しのためにを事前に忘れてしまいました。

var next = $(".active").next(); 
 
var prev = $(".active").prev(); 
 

 
var activeWordPositionTop = $(".active").position().top; // Let's cache this value, 
 
            // instead of fetching it in each iteration again 
 

 
while (next.position().top === activeWordPositionTop) { 
 
    next.css({ 
 
    color: "red" 
 
    }); 
 
    next = next.next(); // advance to the next element of the current one 
 
} 
 
while (prev.position().top === activeWordPositionTop) { 
 
    prev.css({ 
 
    color: "red" 
 
    }); 
 
    prev = prev.prev(); // advance to the previous element of the current one 
 
}

.word { 
 
    font-family: arial, sans-serif; 
 
    font-size: 14px; 
 
    line-height: 1.25em; 
 
} 
 
.active { 
 
    color: red; 
 
} 
 
.active-row { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 

 
<div class="content"> 
 
    <span class="word">Lorem</span> <span class="word">Lorem</span> <span class="word">Lorem</span> <span class="word">ipsum</span> <span class="word">dolor</span> <span class="word">sit amet</span> <span class="word">consectetur</span> <span class="word">adipiscing</span> <span class="word">elit</span> <span class="word">sed</span> 
 
    <span 
 
    class="word">do</span> <span class="word">eiusmod</span> <span class="word">tempor</span> <span class="word">incididunt</span> <span class="word">ut</span> <span class="word">labore</span> <span class="word">et</span> <span class="word">dolore</span> <span class="word">magna</span> 
 
    <span 
 
    class="word">aliqua</span> <span class="word">Ut</span> <span class="word">enim</span> <span class="word">ad</span> <span class="word">minim</span> <span class="word">veniam</span> <span class="word">quis</span> <span class="word">nostrud</span> <span class="word">exercitation</span> 
 
     <span 
 
     class="word">ullamco</span> <span class="word">laboris</span> <span class="word">nisi</span> <span class="word">ut</span> <span class="active word">aliquip</span> 
 
     <span class="word">ex</span> <span class="word">ea</span> <span class="word">commodo</span> <span class="word">consequat</span> <span class="word">Duis</span> <span class="word">aute</span> <span class="word">irure</span> <span class="word">dolor</span> 
 
     <span 
 
     class="word">in</span> <span class="word">reprehenderit</span> <span class="word">in</span> <span class="word">voluptate</span> <span class="word">velit</span> <span class="word">esse</span> <span class="word">cillum</span> <span class="word">dolore</span> <span class="word">eu</span> 
 
      <span 
 
      class="word">fugiat</span> <span class="word">nulla</span> <span class="word">pariatur</span> <span class="word">Excepteur</span> <span class="word">sint</span> <span class="word">occaecat</span> <span class="word">cupidatat</span> <span class="word">non</span> 
 
      <span 
 
      class="word">proident</span> <span class="word">sunt</span> <span class="word">in</span> <span class="word">culpa</span> <span class="word">qui</span> <span class="word">officia</span> <span class="word">deserunt</span> <span class="word">mollit</span> <span class="word">anim</span> 
 
       <span 
 
       class="word">id</span> <span class="word">est</span> <span class="word">laborum</span> 
 
</div>

あなたの例では、アクティブ単語aliquipだけのコードスニペットボックスの標準幅にその行の最初の単語であることを起こったので、（私は、初めに2つのLoremsを追加しました - それは、中心にリッテ以上であることと、それはコードが何をそれが必要ない、より顕著になる）

Answer 2

ただ、whileループ

内部 prev & next変数を更新。

var next = $(".active").next(); 
 
var prev = $(".active").prev(); 
 

 
var activeWord = $(".active"); 
 

 
while (next.position().top === activeWord.position().top || prev.position().top === activeWord.position().top) { 
 
    next.css({ 
 
    color: "red" 
 
    }); 
 
    prev.css({ 
 
    color: "red" 
 
    }); 
 
//just update prev & next variables 
 
prev = next; 
 
next = next.next(); 
 
}

.word { 
 
    font-family: arial, sans-serif; 
 
    font-size: 14px; 
 
    line-height: 1.25em; 
 
} 
 
.active { 
 
    color: red; 
 
} 
 
.active-row { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 

 
<div class="content"> 
 
    <span class="word">Lorem</span> <span class="word">ipsum</span> <span class="word">dolor</span> <span class="word">sit amet</span> <span class="word">consectetur</span> <span class="word">adipiscing</span> <span class="word">elit</span> <span class="word">sed</span> 
 
    <span 
 
    class="word">do</span> <span class="word">eiusmod</span> <span class="word">tempor</span> <span class="word">incididunt</span> <span class="word">ut</span> <span class="word">labore</span> <span class="word">et</span> <span class="word">dolore</span> <span class="word">magna</span> 
 
    <span 
 
    class="word">aliqua</span> <span class="word">Ut</span> <span class="word">enim</span> <span class="word">ad</span> <span class="word">minim</span> <span class="word">veniam</span> <span class="word">quis</span> <span class="word">nostrud</span> <span class="word">exercitation</span> 
 
     <span 
 
     class="word">ullamco</span> <span class="word">laboris</span> <span class="word">nisi</span> <span class="word">ut</span> <span class="active word">aliquip</span> 
 
     <span class="word">ex</span> <span class="word">ea</span> <span class="word">commodo</span> <span class="word">consequat</span> <span class="word">Duis</span> <span class="word">aute</span> <span class="word">irure</span> <span class="word">dolor</span> 
 
     <span 
 
     class="word">in</span> <span class="word">reprehenderit</span> <span class="word">in</span> <span class="word">voluptate</span> <span class="word">velit</span> <span class="word">esse</span> <span class="word">cillum</span> <span class="word">dolore</span> <span class="word">eu</span> 
 
      <span 
 
      class="word">fugiat</span> <span class="word">nulla</span> <span class="word">pariatur</span> <span class="word">Excepteur</span> <span class="word">sint</span> <span class="word">occaecat</span> <span class="word">cupidatat</span> <span class="word">non</span> 
 
      <span 
 
      class="word">proident</span> <span class="word">sunt</span> <span class="word">in</span> <span class="word">culpa</span> <span class="word">qui</span> <span class="word">officia</span> <span class="word">deserunt</span> <span class="word">mollit</span> <span class="word">anim</span> 
 
       <span 
 
       class="word">id</span> <span class="word">est</span> <span class="word">laborum</span> 
 
</div>