Настроить selectmenu jquery под идентификатором

avatar
Balance
8 апреля 2018 в 11:18
55
4
0

Я выбрал с помощью jquery-ui

$(function() {
  $("#number")
    .selectmenu()
    .selectmenu("menuWidget")
    .addClass("overflow");
});
fieldset {
  border: 0;
}

label {
  display: block;
  margin: 30px 0 0 0;
}

.overflow {
  height: 200px;
}

.ui-menu-item{
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="number">Select a number</label>
<select name="number" id="number">
  <option>1</option>
  <option selected="selected">2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
</select>

Фрагмент не работает, поэтому вот ссылка на скрипку

https://jsfiddle.net/vgm3txh6/8/

Когда я устанавливаю такой класс, все в порядке

.ui-элемент-меню{ вес шрифта: полужирный; }

Но когда мне нужно использовать его под определенным идентификатором, например, вот так

> #number.ui-menu-item{
  font-weight: bold;
}

Я не применяю стили.

Где моя проблема?

Источник
Hikarunomemory
8 апреля 2018 в 11:20
0

Селектор ID должен начинаться с тега #

Balance
8 апреля 2018 в 11:21
0

Я отредактировал пост, почему-то видно # tag@Hikarunomemory

Balance
8 апреля 2018 в 11:25
0

Нет, потому что это тоже не работает. Проверьте это в скрипте jsfiddle.net/vgm3txh6/12 . @Hikarumemory

Hikarunomemory
8 апреля 2018 в 11:30
0

да, я понял, что ошибался.

Ответы (4)

avatar
Chasing Unicorn - Anshu
8 апреля 2018 в 11:38
1

Ваш id=number не является родительским для класса ui-menu-item. Но id=number-menu есть.

Поскольку > является родительским селектором, вам нужно использовать числовое меню, как указано ниже,

#number-menu > .ui-menu-item{
  font-weight: bold;
}

Решено здесь: https://jsfiddle.net/vgm3txh6/41/

Balance
8 апреля 2018 в 11:46
0

Спасибо. Также один маленький вопрос, если у меня есть это внутри класса, как это, как мне нужно это исправить. Вот ссылка jsfiddle.net/vgm3txh6/45

Chasing Unicorn - Anshu
8 апреля 2018 в 11:55
0

Вы не можете этого сделать, так как тег select имеет display:none, ваш фактический пользовательский интерфейс имеет теги ul и li. Это означает, что вам нужно переопределить css, в данном случае используя их сгенерированные классы и идентификаторы, как указано в файле js.

Mirko Acimovic
8 апреля 2018 в 12:12
0

Трюк был здесь, чтобы выбрать его относительно #number;)

avatar
Sodhi saab
8 апреля 2018 в 11:48
0

Пользовательский интерфейс jQuery создает новый элемент dom, поэтому он получает новый #number-menu.

#number-menu .ui-menu-item{
    font-weight: bold;

}
avatar
Hikarunomemory
8 апреля 2018 в 11:38
0
#number-menu .ui-menu-item{
  font-weight: bold;
}

Я обнаружил, что некоторые элементы автоматически создаются после select#number

.

и параметры, показанные в select#number, находятся в этом элементе ul#number-menu

avatar
Mirko Acimovic
8 апреля 2018 в 11:33
0

Вам необходимо выбрать все последовательные элементы div после #number с помощью класса .ui-menu-item. Вот селектор:

#number ~ div .ui-menu-item{
  font-weight: bold;
  color: white;
}
Mirko Acimovic
8 апреля 2018 в 11:47
0

Он заключен внутри элемента управления jquery ui, поэтому, если вы посмотрите с помощью Inspect Element, вы увидите, что #number находится вне элемента управления jquery ui select, как оболочка. Я постараюсь выбрать его в любом случае.

Mirko Acimovic
8 апреля 2018 в 12:06
0

Пожалуйста, попробуйте сейчас.