jQuery

Question

我有 4 个 div 相同的 class 名称 和 select 选项 在他们每个人中。对于 select 选项，如何仅在 even div（2、4、6、8 等）中更改背景？

我尝试过 :nth-child(even)，但没有成功，当我尝试 $(".tmgrpslc(1)").addClass('red'); 时，它确实改变了第二个 select 选项的背景并且是正确的。但如前所述，我想更改 even select 选项的背景 。

@这是我的代码：*

<!-- First div -->
<div class="col-md-6 selectgroups">
  <div class="nested-fields">

    <div class="form-group">
      <label class="integer optional" for="choice_group">Choice group</label>
      <select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
        <option value="0">A</option>
        <option value="1">B</option>
      </select>
    </div>

  </div>

</div>

<!-- second div -->
<div class="col-md-6 selectgroups">
  <div class="nested-fields">

    <div class="form-group">
      <label class="integer optional" for="choice_group">Choice group</label>
      <select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
        <option value="0">A</option>
        <option value="1">B</option>
      </select>
    </div>

  </div>

</div>

<!-- Third div -->
<div class="col-md-6 selectgroups">
  <div class="nested-fields">

    <div class="form-group">
      <label class="integer optional" for="choice_group">Choice group</label>
      <select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
        <option value="0">A</option>
        <option value="1">B</option>
      </select>
    </div>

  </div>

</div>

<!-- Fourth div -->
<div class="col-md-6 selectgroups">
  <div class="nested-fields">

    <div class="form-group">
      <label class="integer optional" for="choice_group">Choice group</label>
      <select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
        <option value="0">A</option>
        <option value="1">B</option>
      </select>
    </div>

  </div>

</div>

如果 :eq 不是个好主意，并且有其他 select 可以完成这项工作，我愿意接受。

在此先致谢！

Answer 1

一个CSS解决方案。使用伪选择器 :nth-child(even)

div.col-md-6:nth-child(even) .tmgrpslc {
  background-color: palegreen;
}

<!-- First div -->
<div class="col-md-6 selectgroups">
  <div class="nested-fields">

    <div class="form-group">
      <label class="integer optional" for="choice_group">Choice group</label>
      <select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
        <option value="0">A</option>
        <option value="1">B</option>
      </select>
    </div>

  </div>

</div>

<!-- second div -->
<div class="col-md-6 selectgroups">
  <div class="nested-fields">

    <div class="form-group">
      <label class="integer optional" for="choice_group">Choice group</label>
      <select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
        <option value="0">A</option>
        <option value="1">B</option>
      </select>
    </div>

  </div>

</div>

<!-- Third div -->
<div class="col-md-6 selectgroups">
  <div class="nested-fields">

    <div class="form-group">
      <label class="integer optional" for="choice_group">Choice group</label>
      <select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
        <option value="0">A</option>
        <option value="1">B</option>
      </select>
    </div>

  </div>

</div>

<!-- Fourth div -->
<div class="col-md-6 selectgroups">
  <div class="nested-fields">

    <div class="form-group">
      <label class="integer optional" for="choice_group">Choice group</label>
      <select class="tmgrpslc" name="[1460553694556][choice_group]" id="1460553694556_choice_group">
        <option value="0">A</option>
        <option value="1">B</option>
      </select>
    </div>

  </div>

</div>

Answer 2

你可以用“:nth-child(even)”选择器来完成：

$(".selectgroups:nth-child(even)").css("background","#FFFFFF")

jQuery - 使用选择器 :eq() 更改 div 颜色

jQuery - Change div color for even with selector :eq()

html

jquery-selectors