如何更改具有相同顶部位置的跨度的颜色,但不更改跨度组成的段落中上方或下方的同级元素?

我有一个由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>

最佳答案

首先,您不应该同时检查上一个和下一个元素(并且您的代码甚至都没有这样做,因为(next.position().top && prev.position().top)只会导致对或错)-因为一个元素上可能只有一个同级同一行,但另一行在上一行或下一行。

其次,您忘记了下一个和上一个迭代的下一个迭代。



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恰好是该代码段框的标准宽度中该行的第一个单词-中间居多变得更加明显,代码可以做到。

关于jquery - 如何更改具有相同顶部位置的跨度的颜色,但不更改上方或下方的同级的颜色,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40314485/

10-12 00:19
查看更多