Форум

ureech · #1 (**permalink**) 15.04.2016, 21:39

Здравствуйте.Как можно добавить стиль или класс в этом случае.
Вот часть кода

var dropdown = $("<select>").appendTo("nav");
    $("<option id='my' value=''>Menu</option>").appendTo(dropdown);

    $("nav > .menu li > a").each(function() {
        var el = $(this);
        var nav_level = $("nav > .menu").parents().length;
        var el_level = $(this).parents().length - nav_level;
        var pad = new Array(el_level-2 + 1).join('-') + ' ';
        $("<option>", {
            "value"   : el.attr("href"),
            "text"    : pad + el.text()
        }).appendTo(dropdown);
    });

он фомирует такой html

<select>
				<option id="my" value="">Menu</option>
				<option value="/groups"> 
                     Группы                                            
                </option><option value="/activity">                    
                        Активность                                            
                </option><option value="/comments">                     
                        Комментарии                                            
                </option><option value="/users">                     
                        Люди                                            
                </option>
				</select>

Пытаюсь привязать стили к слову Menu в первом опшине, но ничего не выходит. Прошу помощи.

рони · #2 (**permalink**) 15.04.2016, 22:27

ureech,
так в чём проблема добавить класс? так пропишите в строке 2.
добавить стиль который не добавляется, то это никак.

ureech · #3 (**permalink**) 15.04.2016, 22:59

Не цепляются стили ни в какую.
Пробовал
#my{color:red}, select #my{color:red}, nav #my{color:red}, select option#my{color:red}, nav > #my{color:red} и прочее
К слову Menu применяется только, когда открывается селект и там в первом опшине стиль меняется.При закрытом селекте никак.

рони · #4 (**permalink**) 15.04.2016, 23:32

ureech,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     .red{
        color:red;
     }
     .red option:nth-child(n + 1){
        color: #000000;
     }
     option:nth-child(1){
        color: red;
     }
 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</script>
  <script>
 $(function(){
       var dropdown = $("select");
 dropdown.on("change",function() {
    dropdown.toggleClass("red", !this.value)
}).change()
   })
  </script>
</head>

<body>
<select>
				<option value="">Menu</option>
				<option value="/groups">
                     Группы
                </option><option value="/activity">
                        Активность
                </option><option value="/comments">
                        Комментарии
                </option><option value="/users">
                        Люди
                </option>
				</select>


</body>
</html>

ureech · #5 (**permalink**) 17.04.2016, 15:41

Большое спасибо,как всегда выручил.

Форум

Справочник

Discord чат

Курсы javascript