我想用 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>
最佳答案
首先,您的代码不起作用,因为 select2-container
元素是同级元素,因此对它们调用 find()
得到 child 没有任何返回。只需删除 find()
调用,并将选择器交给 siblings()
即可。另请注意,您可以缩短 border
规则,如下所示:
$(".select").each(function() {
$(this).siblings(".select2-container").css('border', '5px solid red');
});
但是,更重要的是,您应该注意,当您可以将规则直接放置在 CSS 代码中时,使用 JS 代码有点多余:
$(".select").select2();
.select2-container {
border: 5px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.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>
关于jquery - 如何在每个 select2 选择框周围设置边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43051735/