jQuery：仅在奇数时选择最后一个 div

Question

我正在尝试使用具有不同数量字段的两列表单来设置登录页面的样式。该页面有时会使用具有偶数个字段的表单，有时会使用具有奇数个字段的表单。我希望表单的最后一个字段在具有奇数个字段时显示全宽而不是 2 列。

我认为这需要一些 jquery，但我不太确定该怎么做。

表单的每个输入字段都由一个 class="row" 的 div 包裹。 如果表单字段的数量为奇数，我希望最后一个字段的“行”类为 width:100%。

更新：

以下是我的表单结构示例。我在底部还有两个字段，在表单加载时使用 jquery 添加了一个附加类（floatDIV），但我只希望将文本/电子邮件/电话/选择字段计为用于确定的字段数奇偶。我也无法删除任何现有的课程。

我真的找不到使用 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>