Using .eq() and each() together

Question

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("");
    $('.select[id*=sub2] option:eq(0)').replaceWith("");
    $('.select[id*=sub3] option:eq(0)').replaceWith("");
    $('.select[id*=sub4] option:eq(0)').replaceWith("");
    $('.select[id*=sub5] option:eq(0)').replaceWith("");
    $('.select[id*=sub6] option:eq(0)').replaceWith("");
    $('.select[id*=sub7] option:eq(0)').replaceWith("");
    $('.select[id*=sub8] option:eq(0)').replaceWith("");

I tried:

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

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.

user_2813224 · Answer

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("");
});

user_2181514 · Answer

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)

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)

Using .eq() and each() together

2 Answers