jQuery: выбор последнего div только тогда, когда он нечетный

Question

Я пытаюсь оформить целевую страницу в форме из двух столбцов с различным количеством полей.На странице иногда используется форма с четным числом полей, а иногда используется форма с нечетным количеством полей.Я хотел бы, чтобы последнее поле формы отображало полную ширину, а не 2 столбца, когда в нем нечетное количество полей.

Я думаю, что это потребует некоторого jquery, но я не слишком уверен, как это сделать.

Каждое поле ввода формы заключено в div с строкой class = "».Я хотел бы, чтобы класс "row" имел ширину: 100% для последнего поля, если есть нечетное количество полей формы.

UPDATE:

Ниже приведен пример структурымоя формаУ меня также есть два поля внизу, к которым добавлен дополнительный класс (floatDIV) с использованием jquery при загрузке формы, но я хочу, чтобы поля text / email / tel / select учитывались только как количество полей, используемых для определениячет / нечет.Я также не могу удалить существующие классы.

Я не могу найти способ использовать last-child или nth-child, так как я пытаюсь нацелиться на класс.

<form>
  <div class="row">
    <div class="col">
      <input id="name" name="name" type="text" class="field" placeholder="name">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <input id="email" name="email" type="email" class="field" placeholder="email">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <input id="phone" name="phone" type="tel" class="field" placeholder="phone">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <input id="phone" name="phone" type="tel" class="field" placeholder="phone">
    </div>
  </div>
  <div class="row floatDIV">
    <div class="col">
      <div><span>some text</span></div>
    </div>
  </div>
  <div class="row floatDIV">
    <div class="col">
      <label for="content" class="label"><span>some text</span></label>
      <div class="checkbox">
        <input name="checkbox" id="checkbox" type="checkbox" value="yes" class="field">
      </div>
    </div>
  </div>
  <div class="button">
    <button type="submit" class="btn">Submit</button>
  </div>
  <input type="hidden" name="formid" class="field" value="4">
  <input type="hidden" name="pageid" class="field" value="5">
</form>

То, что у меня сейчас есть, выбирает последний нечетный div, даже если форма имеет четное количество полей, а это не то, что мне нужно.Я хотел бы добавить новый стиль только в последнюю строку, в которой нет класса floatDIV, только если это нечетное поле.

$('.row:odd').not(".floatDIV").last().addClass('last');

Answer 1

Я думаю, что это то, что вы ищете:

var evenodd;

if (Math.floor($('.row').length / 2) === ($('.row').length / 2)) {
  console.log('even');
} else {
  console.log('odd');
  $('.columns').addClass('odd');
}

.columns{
  box-sizing:border-box;
}

.row {
  display: inline-block;
  width: 48%;
  border: 1px solid red;
}

.columns.odd .row:last-child {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="columns">

  <div class="row">
    A
  </div>
  <div class="row">
    B
  </div>
  <div class="row">
    C
  </div>
  <div class="row">
    D
  </div>
  <div class="row">
    E
  </div>
</div>