selector does not work: $ ("div + p")

Question

selector does not work: $ ("div + p")

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

Someone could tell me why this command line is not working:

$("#marcas_select + #modelos_teste").css("background-color", "yellow");

Here is the complete code. As everyone can see the purpose is to let the select_test model with the yellow background

$(document).on('change', ':focus', function(evt) {

    $("#marcas_select + #modelos_teste").css("background-color", "yellow");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="control-group nested-fields" style="border: 1px solid red">

  <div class="field col-xs-3">
    <label for="person_carros_attributes_0_marca_id">Marca</label>
    <select id="marcas_select" class="form-control" name="person[carros_attributes][0][marca_id]"><option value="">Selecionar marca</option>
      <option value="1">Fiat</option>
      <option value="2">Chevrollet</option>
      <option value="3">Ford</option>
    </select>
  </div>
  <br></br>
<div class="field col-xs-3">
  <label for="person_carros_attributes_0_modelo_id">Modelo</label>

   <select id="modelos_teste" class="form-control" name="person[carros_attributes][0][modelo_id]"><option value="6">Uno</option>
    <option value="7">Palio</option>
    <option value="8">Siena</option>
    <option value="9">Prisma</option>
    <option value="10">Onix</option>
    <option value="11">Cobalt</option>
    <option value="12">Ka</option>
    <option value="13">Toro</option>
  </select>
</div>

jquery css

asked by anonymous 29.11.2016 / 18:15

2 answers

How to make a query in C language? Java array: no value

score 2 · Answer 1

Working Code

$('#marcas_select').on('focus', function(evt) {

  $('#modelos_teste').css('background-color', 'yellow');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="control-group nested-fields" style="border: 1px solid red">

  <div class="field col-xs-3">
    <label for="person_carros_attributes_0_marca_id">Marca</label>
    <select id="marcas_select" class="form-control" name="person[carros_attributes][0][marca_id]">
      <option value="">Selecionar marca</option>
      <option value="1">Fiat</option>
      <option value="2">Chevrollet</option>
      <option value="3">Ford</option>
    </select>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <div class="field col-xs-3">
    <label for="person_carros_attributes_0_modelo_id">Modelo</label>

    <select id="modelos_teste" class="form-control" name="person[carros_attributes][0][modelo_id]">
      <option value="6">Uno</option>
      <option value="7">Palio</option>
      <option value="8">Siena</option>
      <option value="9">Prisma</option>
      <option value="10">Onix</option>
      <option value="11">Cobalt</option>
      <option value="12">Ka</option>
      <option value="13">Toro</option>
    </select>
  </div>

$("#marcas_select + #modelos_teste").css("background-color", "yellow") ;

This '+' between ids says that it will get all elements that have id marcas_select obligatorily followed by an element with id modelos_teste

In this link you can read the doc of this selector

If you explain what you need, tell me that I can help you.

score 1 · Answer 2

To leave select modelo_teste with the yellow background:

$(document).on('change', ':focus', function(evt) {
    $('#modelos_teste').css('background-color', 'yellow');
});

See working at JsFiddle