0

Всем привет! Как можно удалить класс последнего элемента (:last-child) и добавить новый класс? Допустим в ряд идут 3 .col-6, нужно удалить класс .col-6 у последнего элемента и добавить класс .col-12?

<div class="row">
  <div class="col-6">
  </div>
</div>
<div class="row">
  <div class="col-6">
  </div>
</div>
<div class="row">
  <div class="col-6">
  </div>
</div>

1
  • 1
    Попробуйте обойтись без скрипта. Если вы хотите при определении размера экрана поменять размер колонки (вдруг) почитайте про явное указание блоков при определенном размере. Можно написать класс col-6 col-sm-12 4 июл 2019 в 13:52

3 ответа 3

4

Вот так?

const cols = document.querySelectorAll('.col-6');
const first = cols[0];
const last = cols[cols.length- 1];

last.className = "col-12";
.col-12 {
  width:100%;
  background:purple;
  height:40px;
}
.col-6 {
  width:100%;
  background:red;
  height:40px;
}
<div class="row">
  <div class="col-6">первый
  </div>
</div>
<div class="row">
  <div class="col-6">второй
  </div>
</div>
<div class="row">
  <div class="col-6">последний
  </div>
</div>

4
  • Супер, огромное спасибо! А как указать, что .col-6 будет именно из .row, а не другие .col-6. То есть в css я бы написал: .row .col-6 {}, чтобы не применялся к другим col-6 на странице? 4 июл 2019 в 14:01
  • 2
    @foreigndezigner проста добавьте внутри querySelectorAll('.row .col-6')
    – Randall
    4 июл 2019 в 14:06
  • Огромнейшее спасибо, все работает! 4 июл 2019 в 14:07
  • const last = document.querySelector('.row:nth-last-of-type(1) .col-6');
    – user256824
    4 июл 2019 в 14:15
1

Легче всего будет воспользоваться методом toggleClass() с jquery. Это будет выглядеть так
$('.col-6').last().toggleClass('col-6 col-12');

1

Вариант на jQuery

$('.row .col-6:last').removeClass('col-6').addClass('col-12');
.col-6:before { content: '.col-6'; }
.col-12:before { content: '.col-12'; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-6">
  </div>
</div>
<div class="row">
  <div class="col-6">
  </div>
</div>
<div class="row">
  <div class="col-6">
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.