Rubioli
Rubioli

Reputation: 680

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

I have 4 divs with same class name and select option in each of them. How can I change background in ONLY even divs (2,4,6,8 etc) for select options?

I have tried with :nth-child(even), with no luck and when I tried with $(".tmgrpslc(1)").addClass('red'); It did changed the background of second select opetion and was correct. But as said I want to change background for even select options.

@Here is my code:*

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

If :eq is not good idea and there is other selectors that does the job, I am open to it.

Upvotes: 0

Views: 539

Answers (2)

Pugazh
Pugazh

Reputation: 9561

A CSS solution. Use the psuedo selector :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>

Upvotes: 3

Burak Koray Balcı
Burak Koray Balcı

Reputation: 167

You can do it with ":nth-child(even)" selector:

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

Upvotes: 1

Related Questions