Как изменить цвет фона каждого элемента selectItems в selectOneListbox?

222

05 июня 2018, 13:20

У меня есть элемент на странице

<p:selectOneListbox id="itemList">
<f:selectItems value="#{MyBean.selectedList}" />

в selectedList приходит список айтемов и в зависимости от того выполнился процесс или нет - рядом с айтем появляется фраза proccess failed или proccess success.

Вся проблема состоит в том что в зависимости от фразы у selectItems должен окрашиваться фон в красный или зеленый цвета. Я не знаю как это сделать. Пыталась написать js функцию и вызвать ее всяческими путями, но ниразу эта функция не была вызвана. Либо она криво написана, либо как-то не так вызываю.

Функция выглядит вот так:

function highlightItems() {
 for (var i = 0; i &lt; 3; i++) {
  var curChild = "#itemList > div.ui-selectlistbox-listcontainer > ul > li:nth-child(" + i + ")";
           if($(curChild).text().indexOf("Success") != -1) {
              $(curChild).css({"background-color":"green !important"});
           } else if($(curChild).text().indexOf("failed") != -1){
              $(curChild).css({"background-color":"red !important"});
           } else {
              $(curChild).css({"background-color":"black !important"});
           }
        } 
    }

Answer 1

Проблема в том, что при установке стилей через атрибут style (css в jquery) нельзя, да и не нужно, использовать !important. Установленный стиль перебьет стиль в классе, если в классе он не объявлен !important.

$('.without').css({ 
  'background-color': 'red!important' 
}); 
 
$('.with').css({ 
  'background-color': 'red' 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="without">without background</div> 
<div class="with">with background</div>