如何在每个 select2 选择框周围设置边框？

Question

我想用 jQuery 在我的每个选择框周围设置一个红色边框。但它不起作用：

http://jsfiddle.net/jEADR/3795/

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
 <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">

<select class="select" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>
    <select class="select" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

<script>
    $(".select").select2();
    $(".select").each(function() {
    $(this).siblings().find(".select2-container").css({"border-color": "red", "border-weight":"5px", "border-style":"solid"});
    });
</script>

Answer 1

首先，您的代码不起作用，因为select2-container元素是兄弟元素，因此调用find()它们获取子元素不会返回任何内容。只需删除find()调用，并将选择器赋予siblings()。另请注意，您可以缩短border规则，如下所示：

$(".select").each(function() {
  $(this).siblings(".select2-container").css('border', '5px solid red');
});

然而，更重要的是，您应该注意，当您可以将规则直接放在 CSS 代码中时，使用 JS 代码有点多余：

$(".select").each(function() {
  $(this).siblings(".select2-container").css('border', '5px solid red');
});

$(".select").select2();

.select2-container {
  border: 5px solid red;
}