Использование .eq() и each() вместе
Я хотел бы использовать .каждый для изменения первой опции каждого отдельного элемента выбора. Код ниже все работает. Вы можете видеть, что .each используется для изменения (выделения) границы каждого выбранного элемента, когда он сфокусирован. Однако я не могу понять, как заставить его работать для замены первых вариантов.
$(".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>");
Я попытался:
$('.select[id*=sub] option:eq(0)').each(function(i) {
$(this).replaceWith("<option value disabled hidden></option>");
});
И ряд других комбинаций с использованием .eq(0) в разных местах. Он либо заменил первый вариант первого выбора, либо вообще ничего не сделал. Как только я выясню, как это сделать правильно, это поможет мне упорядочить мой код на нескольких страницах в некоторых онлайн-викторинах, которые я провожу.
(И если вы также не используете jQuery.)
Попробуйте с $('select[id^=sub]').filter(function() {return $(this).find("option:eq(0)")}).each(function(i) {
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В 90% случаев использование #id на самом деле мешает. Более того, если используется jQuery, #id не нужен в 99% случаев.
:eq() возвращает только одно совпадение. Чтобы использовать его для нескольких целей, он должен находиться внутри фактического цикла или итерации.
Самый простой способ — убрать :eq() и упростить селектор:
$('.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>Благодарю вас! Это сработало. Я вернул его обратно к «<option value disabled hidden></option>» — я использую html/javascript/jquery, чтобы изменить поведение вопросов о настроении. Однако ваше решение отлично сработало, и я смогу реализовать его в других областях. Извините, я еще не могу голосовать, я только зарегистрировался и начал изучать все это две недели назад, у меня еще недостаточно репутации.
Это здорово, рад помочь.
Проблема с
$('.select option:eq(0)')
это эквивалент
$('.select[id*=sub] option').first()
console.info($("select option:eq(0)").length)
console.info($("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>Вместо этого используйте :first-child(). Существуют и другие методы, такие как :first-of-type и :nth-child(1) (на основе 1).
Примечание. : экв (п) устарел в jquery.
console.info($("select option:first-child").length)
console.info($("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>
Если вы используете jQuery, работать с кучей
.classпроще, чем с кучей#id.