如何改变具有相同顶部位置的跨度的颜色，但不是上面或下面的兄弟姐妹

Question

如何更改由span组成的段落中具有相同顶部位置的span的颜色，但不包括上面或下面的兄弟元素?

我有一个由span标签生成的段落，并且已经开始弄清楚如何改变span的行颜色，span带有附加的.active类

实现这一目标的好方法是什么?

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)—因为一个元素可能在同一行只有一个兄弟元素，但另一个在前一行或下一行。

其次，你忘记了推进下一个和prev为下一次迭代。

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>

(我在开始时又添加了两个Lorems，因为在您的示例中，活动字aliquip恰好是代码段框的标准宽度中该行上的第一个字-随着它更靠近中心，它变得更明显，代码应该做什么。)

Answer 2

更新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>