如何更改具有相同顶部位置的跨度的颜色,但不更改跨度组成的段落中上方或下方的同级元素?
我有一个由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/