jQuery UI 自动完成：在 javascript 中设置列​​表项的 css

Question

我正在使用 jQuery UI 的自动完成模块。我在不同的地方使用它，需要根据它所附加的元素的一些 CSS 类来改变它的颜色。

我想在 JavaScript 中做到这一点，而不必为所有不同的颜色编写一堆不同的 CSS。我能够轻松选择和更改主自动完成“框”的颜色我无法选择单个列表元素并在 JavaScript 中更改它们。

以下工作没问题：

$("ul.ui-autocomplete").css("color", "white");
$(".ui-widget-content").css({"background": "transparent", "border-color": "white"});

但是，这些都不做任何事情：

$("ul.ui-autocomplete li").css("background", "red");
$("ul.ui-autocomplete li.ui-menu-item").css("background", "red");
$("ul.ui-autocomplete").children().css("background", "red");

烦人的是这个 CSS 确实工作：

ul.ui-autocomplete li {
    background: red;
}

谁能解释如何从 JavaScript 设置列表项 CSS？

谢谢！

Answer 1

这对我来说很好用。请检查此fiddle。

var projects = ["apple","orange","banana","kiwi"];

$("#project").autocomplete({
    source: projects,
    messages: {
        noResults: '',
        results: function() {
            $("ul.ui-autocomplete li").css("background", "green");

        }
    },
    autoFocus: true
});