Блог

Итак, у меня есть форма с вводом и выбором. Что мне нужно сделать, так это добавить другой цвет в требуемые поля, и я пытаюсь не изменять html, который у меня уже есть, поэтому я выполняю функцию на JS. Для ввода это просто, потому что я выполняю следующую функцию, и она изменяет цвет ввода, потому что во входных данных указан «data-val-required».

   $('input').each(function () {
        var req = $(this).attr('data-val-required');
        if (undefined != req) {
            $(this).css("background-color", 'rgb(250, 255, 189)');
            $(this).attr('title', 'Este campo é obrigatório!');
        }
    });
  

Но для выбора я не могу сделать то же самое, потому что «data-val-required» находится в промежутке после <select> . что я хочу сделать, так это прочитать <span> , а затем раскрасить <select> перед ним.

HTML выглядит примерно так (class=»col-md-9″ одинаков для каждого элемента формы в представлении)

 <div class="col-md-9">
  <select class="form-control">
    <option selected="selected" value="1">TEXTO 1</option>
    <option value="2">TEXTO 2</option>
    <option value="3">TEXTO 3</option>
  </select>
  <span class="field-validation-error" data-val-required="true">Campo obrigatório</span>
</div>
  

Я пробовал это, но это окрашивает все <select> лагеря, которые у меня есть в моем коде, а не только те, которые требуются.

 $('span').each(function () {
        var rep = $(this).attr('data-val-required');
        if (undefined != rep) {
            $('select').css("background-color", 'rgb(250, 255, 189)');
            $('select').attr('title', 'Este campo é obrigatório!');
        }
    });
  

Можно ли в любом случае без изменения HTML заставить функцию считывать диапазон и изменять только выбор перед этим диапазоном?
Я ищу дочерние узлы, но, похоже, я не могу сделать это с помощью class вместо id.
Спасибо!

Вы должны были выбрать на прямом дочернем '~' типе от SPAN из ВЫБОРА с помощью класса form-control. Для поиска в SELECT найдите родственного пользователя из вашего SPAN с желаемым классом и типом SELECT.

 $('select.form-control ~ span').each(function () {
        var rep = $(this).attr('data-val-required');
        if (undefined != rep) {
            let select = $(this).siblings('select.form-control');
            select.css("background-color", 'rgb(250, 255, 189)');
            select.attr('title', 'Este campo é obrigatório!');
        }
    });  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-9">
  <select class="form-control">
    <option selected="selected" value="1">TEXTO 1</option>
    <option value="2">TEXTO 2</option>
    <option value="3">TEXTO 3</option>
  </select>
  <span class="field-validation-error" data-val-required="true">Campo obrigatório</span>
</div>
<div class="col-md-9">
  <select class="form-control">
    <option selected="selected" value="1">TEXTO 1</option>
    <option value="2">TEXTO 2</option>
    <option value="3">TEXTO 3</option>
  </select>
  <span>Campo obrigatório2</span>
</div>  

Попробуйте это.

 $('span').each(function() {
  var rep = $(this).attr('data-val-required');
  if (undefined != rep) {
   $(this).siblings('select').css("background-color", 'rgb(250, 255, 189)');
    $(this).siblings('select').find('select').attr('title', 'Este campo é obrigatório!');
  }
});  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="col-md-9">
  <select class="form-control">
    <option selected="selected" value="1">TEXTO 1</option>
    <option value="2">TEXTO 2</option>
    <option value="3">TEXTO 3</option>
  </select>
  <span class="field-validation-error" data-val-required="true">Campo obrigatório</span>
</div>
<div class="col-md-9">
  <select class="form-control">
    <option selected="selected" value="1">TEXTO 1</option>
    <option value="2">TEXTO 2</option>
    <option value="3">TEXTO 3</option>
  </select>
  <span>Campo obrigatório2</span>
</div>