jqueryhtmljquery-selectors

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.


Solution

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