Выборка jQuery. Выбор элементов

203

30 декабря 2018, 12:50

Есть select в котором есть option. Как сделать добавление стилей тому option в котором только одна точка?

<select>
    <option>.1</option>
    <option>..2</option>
    <option>..3</option>
    <option>.2</option>
    <option>..1</option>
    <option>..2</option>
</select>

Я написал условия, но у меня косяк

if($("option").text().indexOf('.') > 0 ){
    $("option").css("background-color", "red");
}
else {
    $("option").css("background-color", "green");
}

Answer 1

Можно сделать без js, правда придется добавить value с таким же значением

select option[value^="."] { 
    background-color: red; 
} 
select option[value^=".."] { 
    background-color: initial; 
}

<select> 
    <option value=".1">.1</option> 
    <option value="..2">..2</option> 
    <option value="..3">..3</option> 
    <option value=".2">.2</option> 
    <option value="..1">..1</option> 
    <option value="..2">..2</option> 
</select>

Answer 2

Цвет зависит от второго символа в тексте у option(textContent[1] === '.') Но этот скрипт учитывает что всегда идет две точки или точка.

const options = document.querySelector('select').options 
 
;[...options].forEach(i =>  
  i.style['background-color'] = (i.textContent[1] === '.' ? 'red' : 'green') 
)

<select> 
  <option>.1</option> 
  <option>..2</option> 
  <option>..3</option> 
  <option>.2</option> 
  <option>..1</option> 
  <option>..2</option> 
  <!-- если такого не будет в селекте --> 
  <option>o.text</option> 
  <option>text</option> 
</select>

Более надежный но длиннее код. Сравнивает честь строки через slice

const options = document.querySelector('select').options 
 
;[...options].forEach(i => { 
  let color 
  if (i.textContent.slice(0, 2) === '..') 
    color = 'red' 
  else if (i.textContent.slice(0, 1) === '.') 
   color = 'green' 
    
  i.style['background-color'] = color 
})

<select> 
  <option>.1</option> 
  <option>..2</option> 
  <option>..3</option> 
  <option>.2</option> 
  <option>..1</option> 
  <option>..2</option> 
  <option>o.text</option> 
  <option>text</option> 
</select>