I must update a bootstrap class name within multiple layers of divs by referring to the parent class

Question

I must update a bootstrap class name within multiple layers of divs by referring to the parent class

My code structure is set up like this:

<div id="main-parent">
    <div class="child2">
        <div>
            child2
        </div>
    </div>
    <div>child3</div>
    -
    -
    -
    -
    <div class="child-n">
        <div class="row">
            <div class="child-n1 col-sm-7 col-sm-push-5">child n</div>
        </div>
    </div>
</div>

In this structure, I am looking to replace the classes (col-sm-7 col-sm-push-5) with the class (col-sm-12).

I only want to change the parent-child and sibling logic for these classes.

Any suggestions or solutions would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

To modify the elements you desire, utilize a selector that specifically targets them. Employ the .addClass() and .removeClass() functions to adjust the classes accordingly.

The selector in use here exclusively targets DIVs with classes col-sm-7 andcol-sm-push-5within the.child-n

DIV. This means that similar classes in

child2andchild3` will remain unaffected.

$("#button").click(function() {
  $("#main-parent .child-n .col-sm-7.col-sm-push-5")
    .removeClass("col-sm-7 col-sm-push-5")
    .addClass("col-sm-12");
});

.col-sm-7 {
  background-color: yellow;
}
.col-sm-push-5 {
  background-color: green;
}
.col-sm-12 {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main-parent">
  <div class="child2">
    <div>
      child2
    </div>
  </div>
  <div>child3</div>
  <div class="child-n">
    <div class="row">
      <div class="child-n1 col-sm-7 col-sm-push-5">child n</div>
    </div>
  </div>
</div>
<button id="button">Click to change class</button>

Answer 2

To modify the elements you desire, utilize a selector that specifically targets them. Employ the .addClass() and .removeClass() functions to adjust the classes accordingly.

The selector in use here exclusively targets DIVs with classes col-sm-7 andcol-sm-push-5within the.child-n

DIV. This means that similar classes in

child2andchild3` will remain unaffected.

$("#button").click(function() {
  $("#main-parent .child-n .col-sm-7.col-sm-push-5")
    .removeClass("col-sm-7 col-sm-push-5")
    .addClass("col-sm-12");
});

.col-sm-7 {
  background-color: yellow;
}
.col-sm-push-5 {
  background-color: green;
}
.col-sm-12 {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main-parent">
  <div class="child2">
    <div>
      child2
    </div>
  </div>
  <div>child3</div>
  <div class="child-n">
    <div class="row">
      <div class="child-n1 col-sm-7 col-sm-push-5">child n</div>
    </div>
  </div>
</div>
<button id="button">Click to change class</button>

Answer 3

Answer №2

Here is a solution that might help:

const elements = document.querySelectorAll('.col-sm-7.col-sm-push-5');
const elementsArray = Array.from(elements);

elementsArray.forEach(el => {
  el.setAttribute('class', 'col-sm-12');
})

Since this is a dynamic HTML collection, you can simply use setAttribute to update the classes and see the changes reflected in the DOM.

Answer 4

Here is a solution that might help:

const elements = document.querySelectorAll('.col-sm-7.col-sm-push-5');
const elementsArray = Array.from(elements);

elementsArray.forEach(el => {
  el.setAttribute('class', 'col-sm-12');
})

Since this is a dynamic HTML collection, you can simply use setAttribute to update the classes and see the changes reflected in the DOM.

I must update a bootstrap class name within multiple layers of divs by referring to the parent class

Answer №1

Answer №2

Similar questions

Exploring the properties of a file directory

retrieve data properties from an object

Ways to increase the spacing between content boxes using Bootstrap

Trigger an Ajax form submission upon a change occurring

Sending the handleSubmit() function to the child component does not alter the state of the parent component

What is the method for accessing a local XML file with $.ajax?

The if-else statement is providing a misleading outcome

The <img> element is able to fill an entire div while maintaining its original aspect ratio

Using Firebase Authentication in Next.js with Server-Side Components

How can I reduce the size of a Bootstrap 5 carousel that spans the entire screen?

What is the best way to create a dynamic icon using React and TypeScript?

Prioritize moving the JavaScript onload handler to the end of the queue

Error: Unable to locate package @babel/preset-vue version 7.1.0

The user interface of Ajax is configured to initiate a GET request

Unable to properly execute Fetch Delete Request

`How can I effectively integrate react-i18next with the Semantic UI label element?`

Arrays data being retrieved and set by Chrome Extension are visible in the console but not appearing in the HTML

I want to know how to showcase elements from a list one by one and cycle through them using a button with a nodejs server and Pug

AngularJS secureHTML verify image click event

Are elements in React Native PanResponder capable of being clicked?