Using .eq() and each() together-CodePudding

I would like to use .each to change the first option of each individual select element. The code below all works. You can see the .each being using to change (highlight) each select elements border when focused. I can't figure out how to get it to work for replacing the first options however.

$(".select").focusout(function() {
        $(".select").css({
            "border-color": dd_border_color,
            "box-shadow": "unset"
        });
    });

    $(".select").each(function(i) {
        $(this).focus(function() {
            $(this).css({
                "border-color": dd_border_color_s,
                "box-shadow": dd_box_shadow
            });
        });
    });


    $('.select[id*=sub1] option:eq(0)').replaceWith("<option value disabled hidden></option>");
    $('.select[id*=sub2] option:eq(0)').replaceWith("<option value disabled hidden></option>");
    $('.select[id*=sub3] option:eq(0)').replaceWith("<option value disabled hidden></option>");
    $('.select[id*=sub4] option:eq(0)').replaceWith("<option value disabled hidden></option>");
    $('.select[id*=sub5] option:eq(0)').replaceWith("<option value disabled hidden></option>");
    $('.select[id*=sub6] option:eq(0)').replaceWith("<option value disabled hidden></option>");
    $('.select[id*=sub7] option:eq(0)').replaceWith("<option value disabled hidden></option>");
    $('.select[id*=sub8] option:eq(0)').replaceWith("<option value disabled hidden></option>");

I tried:

       $('.select[id*=sub] option:eq(0)').each(function(i) {
        $(this).replaceWith("<option value disabled hidden></option>");
    });

And a number of other combinations, using .eq(0) in different places. It either replaced the first option of the first select, or did nothing at all. Once I figured out how to do this correctly, it'll help me tidy up my code across a number pages in some online quizzes I'm making.

CodePudding user response：

90% of the time the use of #id is actually a hinderance. Moreover if jQuery is used, #id is unnecessary 99% of the time. :eq() only returns a single match. In order to use on multiple targets, it must be inside the actual loop or iteration.

Easiest way is to remove :eq() and simplify the selector:

$('.select option:first-of-type').each(function() {

$('.select option:first-of-type').each(function() {
  $(this).replaceWith("<option selected>This is the new default option</option>");
});

<select class='select'>
  <option>0</option>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>
<select class='select'>
  <option>0</option>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>
<select class='select'>
  <option>0</option>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>
<select class='select'>
  <option>0</option>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>
<select class='select'>
  <option>0</option>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>
<select class='select'>
  <option>0</option>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>
<select class='select'>
  <option>0</option>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>
<select class='select'>
  <option>0</option>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

The issue with

$('.select option:eq(0)')

is it's the equivalent of

$('.select[id*=sub] option').first()

console.log($("select option:eq(0)").length)
console.log($("select option:eq(0)").length === 1)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option></option><option></option><option></option>
</select>
<select>
<option></option><option></option><option></option>
</select>
<select>
<option></option><option></option><option></option>
</select>

Use :first-child() instead. There are also other methods, such as :first-of-type and :nth-child(1) (1-based).

Note: :eq(n) has been deprecated from jquery

console.log($("select option:first-child").length)
console.log($("select option:first-child").length === 3)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option></option><option></option><option></option>
</select>
<select>
<option></option><option></option><option></option>
</select>
<select>
<option></option><option></option><option></option>
</select>