Tips for altering the color of spans that share a common top position without affecting the surrounding sibling elements above or below

Question

Tips for altering the color of spans that share a common top position without affecting the surrounding sibling elements above or below

Is there a way to change the color of spans with the same top position, excluding sibling elements above or below, in a paragraph made up of spans?

I've been working on how to change the color of the line of span tags that contain another span with the "active" class appended.

Any suggestions on achieving this?

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>

jquery html css

Answer 1

Answer №1

First and foremost, it is crucial not to simultaneously check the previous and next element (your code did not do this correctly as

(next.position().top && prev.position().top)

would just result in a boolean value) - since an element could have one sibling on the same line while the other might be on the previous or next line.

Additionally, you neglected to advance both the next and previous elements for the subsequent iterations.

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

var activeWordPositionTop = $(".active").position().top;

while (next.position().top === activeWordPositionTop) {
  next.css({
    color: "red"
  });
  next = next.next(); 
}
while (prev.position().top === activeWordPositionTop) {
  prev.css({
    color: "red"
  });
  prev = prev.prev();  
}

.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">laborum</span>
</div>

(I inserted two additional Lorem words at the beginning to demonstrate that the active word aliquip was coincidentally the first word on its line within the standard width of the code snippet box - positioning it slightly more towards the center makes it clearer that the code functions correctly.)

Answer 2

First and foremost, it is crucial not to simultaneously check the previous and next element (your code did not do this correctly as

(next.position().top && prev.position().top)

would just result in a boolean value) - since an element could have one sibling on the same line while the other might be on the previous or next line.

Additionally, you neglected to advance both the next and previous elements for the subsequent iterations.

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

var activeWordPositionTop = $(".active").position().top;

while (next.position().top === activeWordPositionTop) {
  next.css({
    color: "red"
  });
  next = next.next(); 
}
while (prev.position().top === activeWordPositionTop) {
  prev.css({
    color: "red"
  });
  prev = prev.prev();  
}

.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">laborum</span>
</div>

(I inserted two additional Lorem words at the beginning to demonstrate that the active word aliquip was coincidentally the first word on its line within the standard width of the code snippet box - positioning it slightly more towards the center makes it clearer that the code functions correctly.)

Answer 3

Answer №2

Simply update the prev and next variables within the while loop

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"
  });
//simply 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>

Answer 4

Simply update the prev and next variables within the while loop

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"
  });
//simply 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>

Tips for altering the color of spans that share a common top position without affecting the surrounding sibling elements above or below

Answer №1

Answer №2

Similar questions

Is there a simple way to create a clickable popup menu without using JavaScript?

What is the best way to access an Ajax response outside of its function using JQuery?

Seeking a solution for resolving the problem with HTML1402 when using jquery URL in Internet Explorer?

"Storing a collection of PDF files in an array in TypeScript Angular - A step-by-step

Enter your password using the text input field on Internet Explorer 8

Animating toasts in Bootstrap

working with html data in a bootstrap modal using javascript

The Limits of JavaScript Tables

How can I insert an HTML/PHP code snippet into a <ul> list using JavaScript?

What is the reason for the website allowing me to scroll towards the right?

The challenge of harmonizing variables in PHP and JavaScript

Wrapping a group of elements with opening and closing tags using jQuery

Having difficulty showing the successful JSON output in either the view or an alert

"Exploring the Power of Angular with HTML Checkboxes

CSS problem: alignment issue between text and checkbox

Using Javascript to test a specific item in an asp Listbox

Compatibility Issue between Jquery UI CheckBox Button and Click Function in IE8

I want to know how to move data (variables) between different HTML pages. I am currently implementing this using HTML and the Django framework

The makeStyles feature is currently not functioning properly in the latest version of Next.js with Material UI v5

Looking for assistance with $.ajax - How can I send an object with key-value pairs?