Question

我的代码结构如下

<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>

这里我需要用class（col-sm-12）替换类（col-sm-7 col-sm-push-5）。

只是父母和兄弟姐妹的逻辑我需要改变这些类。

任何想法或解决方案都会有所帮助

Answer 1

使用与要更改的元素匹配的选择器。然后使用.addClass()和.removeClass()更改类。

此选择器仅匹配具有类col-sm-7 and col-sm-push-5 inside the的DIV.child -n DIV, so the similar classes in child2 and child3`不会受到影响。

＆＃13;

$("#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");
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我认为这是你可能正在寻找的东西：

const divs = document.getElementsByClassName('col-sm-7 col-sm-push-5');
const array = Array.prototype.slice.call(divs);

array.forEach(element => {
  element.setAttribute('class', 'col-sm-12')
})

因为这是一个实时HTML集合，您只需要调用setAttribute并为其提供所需的类，它应该在DOM中更新。

我需要使用父类

2 个答案: