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
});

jQuery UI Autocomplete：在javascript中设置列表项的CSS

1 个答案: