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

Asked

Viewed 43 times

1

Would someone like to tell me why this command line isn’t working:

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

Here’s the full code. As everyone can see the goal is to let the select model_test 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>
<div class="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

2 answers

2

Code working

$('#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>
<div class="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 the ids, says it will catch all elements that has id marcas_select must be followed by an element with an id modelos_teste

in this link you can read the doc of this selector

If you explain your need, tell me I can help you

  • I will have several select with id tags_select so I think this: "#tags_select:Focus + #modelos_test" would be more appropriate, only it is not working

  • It is not a good practice to repeat IDS, they are unique use classes for this type of model, and I think you do not understand how the selector works, it will never work because between the id selects_select has "</div> <br></br> <div class="field col-Xs-3"> <label for="person_carros_attributes_0_modelo_id">Model</label>" they are not even in the same scope.

  • In fact repeated ID cause several @Erasmosantos bugs, it is totally impractical. If you need the same selector for multiple fields, use equal attributes or classes if applicable.

1

To leave the select modelo_teste with the yellow background:

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

See working on Jsfiddle

  • I need the model_test to be activated from #marcas_select:Focus, because I will have more select with the div models_test (I know that you should not repeat id =D), so I think that the most suitable for me would be $("#marcas_select + #modelos_test"). only it’s not working

  • @Erasmosantos, do you want the two of them to have a yellow background? If that’s what you can use ,. Would be $('#marcas_select, #modelos_teste').css('background-color', 'yellow');

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.