如何使用jQuery减少`select2`中`li`的填充？

Question

我使用了select2库并尝试使用jquery更改li填充。例：

$('#selectField').on('select2:open', function (e) { $('ul.select2-results__options li').css('padding',  '4px');
});

但上面的代码不起作用。

Answer 1

尝试使用CSS

 ul.select2-results__options li {
       padding :4px
    }

对于特定的下拉列表，在您的情况下#selectField

#select2-selectField-results li {
           padding :4px
        }

Answer 2

请尝试以下代码。

$('#selectField').on('select2:open', function (e) {
  $('ul.select2-results__options > li').css('padding',  '4px');
});

我在CSS选择器中添加了一个>，因为li元素是ul.select2-results__options的子元素。

如果您更喜欢纯CSS，请使用下面的CSS而不是上面的jQuery。

ul.select2-results__options > li {
  padding: 4px;
}