19 марта 2016
Иногда встречается что нужно высчитывать количество блоков или списка и уже в зависимости от количества выполнять ту или иную задачу. Например, есть задача сделать респонсив меню на всю ширину, при этом динамически устанавливать ширину ссылок, если вдруг в меню добавится или уберется пункт меню, то как установить ширину ссылки автоматом? Использовать так:
var $this = $('nav li');
if ($this.length == 1) {
$this.addClass('one');
} else if ($this.length == 2) {
$this.addClass('two');
} else if ($this.length == 3) {
$this.addClass('three');
} else if ($this.length == 4) {
$this.addClass('four');
} else if ($this.length == 5) {
$this.addClass('five');
} else if ($this.length == 6) {
$this.addClass('six');
} else if ($this.length == 7) {
$this.addClass('seven');
} else if ($this.length == 8) {
$this.addClass('eight');
} else if ($this.length == 9) {
$this.addClass('nine');
} else if ($this.length == 10) {
$this.addClass('ten');
}
В CSS:
nav li.one {width: 100%;}
nav li.two {width: 50%;}
nav li.three {width: 33.33%;}
nav li.four {width: 25%;}
nav li.five {width: 20%;}
nav li.six {width: 16.4%;}
nav li.seven {width: 14%;}
nav li.eight {width: 12.5%;}
nav li.nine {width: 11%;}
nav li.ten {width: 10%;}