Question

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

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

表单的每个输入字段都由一个带有class =“ row”的div包裹。如果表单字段数量奇数，我希望“ row”类的宽度为最后一个字段的100％。

更新：

下面是我的表单结构的一个示例。我在底部还有两个字段，当表单加载时，使用jquery向其添加了一个附加类（floatDIV），但我只希望将text / email / tel / select字段计为用于确定的字段数奇偶。我也无法删除任何现有的类。

由于我要定位该类，因此我真的找不到使用上一个孩子或第一个孩子的方法。

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

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

1 个答案: