Utilizing Vanilla JavaScript to Insert a Class When a Distinct Class Exists Within an Element

Question

Utilizing Vanilla JavaScript to Insert a Class When a Distinct Class Exists Within an Element

My goal is to dynamically add a class to specific elements based on the presence of another class in elements below them.

Consider the following code snippet:

< p class="my-paragraph">This is a sentence.</p>
< p class="my-paragraph">This is a sentence.</p>
< p class="my-paragraph">This is a sentence.</p>
<button class="somebutton">Click Here</button>

< p class="my-paragraph">This is a sentence.</p>
< p class="my-paragraph">This is a sentence.</p>
< p class="my-paragraph">This is a sentence.</p>
<image src="URL" />

I want to add a class "nomargin" to elements with the class "my-paragraph" if an element without that class is directly below it.

After implementing this logic, the final output would resemble the following:

< p class="my-paragraph">This is a sentence.</p>
< p class="my-paragraph">This is a sentence.</p>
< p class="my-paragraph nomargin">This is a sentence.</p>
<button class="somebutton">Click Here</button>

< p class="my-paragraph">This is a sentence.</p>
< p class="my-paragraph">This is a sentence.</p>
< p class="my-paragraph nomargin">This is a sentence.</p>
<image src="URL" />

I've been struggling to come up with a solution for this problem using Vanilla JavaScript, and it's been challenging me for a few days now, causing some imposter syndrome feelings.

I believe starting with a for loop could be a good approach, but I'm stuck on the implementation logic. Any guidance or help would be greatly appreciated.

javascript html css

Answer 1

Answer №1

Give this solution a shot.

let paragraphs = [...document.querySelectorAll('.my-paragraph')];
paragraphs.forEach((paragraph) => {
    if (!paragraph.nextElementSibling.classList.contains('my-paragraph')) {
        paragraph.classList.add('nomargin');
    }
});

Answer 2

Give this solution a shot.

let paragraphs = [...document.querySelectorAll('.my-paragraph')];
paragraphs.forEach((paragraph) => {
    if (!paragraph.nextElementSibling.classList.contains('my-paragraph')) {
        paragraph.classList.add('nomargin');
    }
});

Answer 3

Answer №2

To simplify the organization of  tags, consider placing them within a div and utilizing css for styling. By using the css :last-of-type() selector, you can apply different styles to the last my-paragraph tag before a button or an image.

<div class="paragraph-container">
    <p class="my-paragraph">This is a sentence.</p>
    <p class="my-paragraph">This is a sentence.</p>
    <p class="my-paragraph nomargin">This is a sentence.</p>
</div>
<button class="somebutton">Click Here</button>

<div class="paragraph-container">
    <p class="my-paragraph">This is a sentence.</p>
    <p class="my-paragraph">This is a sentence.</p>
    <p class="my-paragraph nomargin">This is a sentence.</p>
</div>
<image src="URL" />

You can implement css similar to the following:

.paragraph-container .my-paragraph:last-of-type() {
    margin: 0;
}

It's possible that you may not need the container. Experimenting with the -of-type css selectors can help achieve the desired result.

Answer 4

To simplify the organization of  tags, consider placing them within a div and utilizing css for styling. By using the css :last-of-type() selector, you can apply different styles to the last my-paragraph tag before a button or an image.

<div class="paragraph-container">
    <p class="my-paragraph">This is a sentence.</p>
    <p class="my-paragraph">This is a sentence.</p>
    <p class="my-paragraph nomargin">This is a sentence.</p>
</div>
<button class="somebutton">Click Here</button>

<div class="paragraph-container">
    <p class="my-paragraph">This is a sentence.</p>
    <p class="my-paragraph">This is a sentence.</p>
    <p class="my-paragraph nomargin">This is a sentence.</p>
</div>
<image src="URL" />

You can implement css similar to the following:

.paragraph-container .my-paragraph:last-of-type() {
    margin: 0;
}

It's possible that you may not need the container. Experimenting with the -of-type css selectors can help achieve the desired result.

Answer 5

Answer №3

While JDawwgy's solution is a great approach, there are alternative methods to consider for situations where grouping paragraph tags into divs is not feasible, such as when using a wysiwyg editor.

For instance, in plain JavaScript, you could (a) select all paragraph tags, (b) iterate through them, (c) check if the next sibling is another , and (d) add a class if the next sibling is not a .

const allParagraphs = document.querySelectorAll('p');

allParagraphs?.forEach((paragraphNode) => {
  const nextSibling = paragraphNode.nextSibling;

  if(nextSibling?.tagName.toLowerCase() !== 'p')
    paragraphNode.className += ' nomargin';
});

Answer 6

While JDawwgy's solution is a great approach, there are alternative methods to consider for situations where grouping paragraph tags into divs is not feasible, such as when using a wysiwyg editor.

For instance, in plain JavaScript, you could (a) select all paragraph tags, (b) iterate through them, (c) check if the next sibling is another , and (d) add a class if the next sibling is not a .

const allParagraphs = document.querySelectorAll('p');

allParagraphs?.forEach((paragraphNode) => {
  const nextSibling = paragraphNode.nextSibling;

  if(nextSibling?.tagName.toLowerCase() !== 'p')
    paragraphNode.className += ' nomargin';
});

Utilizing Vanilla JavaScript to Insert a Class When a Distinct Class Exists Within an Element

Answer №1

Answer №2

Answer №3

Similar questions

Error: The variable 'err' is undefined in the mongoose mongodb code

What is the best way to extend the width of an element within a Bootstrap column beyond the column itself?

I'm wondering why my .focus() function is causing the cursor to move to the start of my contenteditable div?

jQuery Load - Oops! There seems to be a syntax error: Unexpected token <

Validation does not occur when the submit button has an ng-click event attached to it

What is the best way to sort through data retrieved by a server component in a NextJS 13 AppDir?

Finding the nearest span element with a selector in styled components

Animated the height of a rectangle during initial loading and when the mouse hovers over or leaves

Yeoman - Storing global settings efficiently

Navigating between pages using the ExpressJS and Angular 1 routing system

remove leading spaces in JavaScript after retrieving data from database

Erase a chat for only one user within a messaging application

Transform the jQuery UI colorpicker slider into a jQuery Mobile compatible version

The NgModel function within *ngFor is executing more times than necessary during initialization

Previewing posts on a single page can be done by following a few

Angular Material Rotate Ink Bar to Vertical Orientation

Text in SVG vanishes when label size increases

Verification of javascript for an unpredictable image generator script

Having trouble with loading image textures in three.js

Navigate to a different page using Angular2 routing