Quiero establecer un borde rojo alrededor de cada uno de mis cuadros de selección con jQuery. Pero no funciona:
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>En primer lugar, su código no funciona porque los select2-container son los hermanos, por lo que llamar a find() en ellos para obtener los elementos secundarios no devuelve nada. Simplemente elimine la llamada find() y dele el selector a siblings() . También tenga en cuenta que puede acortar la regla del border , así:
$(".select").each(function() { $(this).siblings(".select2-container").css('border', '5px solid red'); });Sin embargo, lo que es más importante, debe tener en cuenta que usar el código JS para esto es un poco redundante cuando puede colocar la regla directamente en su código CSS:
$(".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>.select2-selection { border: 1px solid gold!important;}