在中位数 li 前后更改 li 的 css答案

【问题标题】：Change css of li's before and after the median li在中位数 li 前后更改 li 的 css
【发布时间】：2015-09-15 08:39:23
【问题描述】：

我正在尝试制作无论数量多少都能对齐项目的导航。在else 中，我试图在中位数-li 之前和之后给li 某些css。目前所有li 都是黄色的，因为index 数字在完成循环后总是大于中位数。我的js知识不是很好，但我每天都在学习:)

var count = $("ul.filter__dropdown li").length;

if ( (count & 1) == 0 ) {
    //even
    var w = 100;
    var list = $("ul.filter__dropdown li");
    list.css('width', "calc( 100% /" + count + ")");
}
else {
    //odd
    var median = Math.round(count /= 2);
    var list = $("ul.filter__dropdown li");
    var count = $("ul.filter__dropdown li").length;
    list.css('width', "calc( 100% /" + count + ")");

    $("ul.filter__dropdown li").each(function(index) {

        if ( index < median ) {
            list.css("background-color" , "black");
        }

        if ( index == median ) {
            list.css("background-color" , "green");
        }

        if ( index > median ) {
            list.css("background-color" , "yellow");
        }
    })
}

【问题讨论】：

标签： javascript jquery css html-lists median

【解决方案1】：

您可以使用:lt 和:gt 选择器分别选择中位数和after 某个索引之前的li 元素，即中位数。

var total = $('li').length,
  median = Math.floor(total / 2);

$('li:lt(' + median + ')').addClass('green');
$('li:gt(' + median + ')').addClass('red');
// $('li').eq(median).addClass('median');

li {
  color: yellow;
}
.green {
  color: green;
}
.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
</ul>

【讨论】：

【解决方案2】：

你可以像使用 .slice() 一样

var $lis = $("ul.filter__dropdown li"),
  count = $lis.length;

if ((count & 1) == 0) {
  //even
  var w = 100;
  $lis.css('width', "calc( 100% /" + count + ")");
} else {
  //odd
  var median = Math.round(count / 2);
  $lis.css('width', "calc( 100% /" + count + ")");

  $lis.slice(0, median - 1).css("background-color", "black");
  $lis.eq(median - 1).css("background-color", "green");
  $lis.slice(median).css("background-color", "yellow");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="filter__dropdown">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

你可以像这样合并宽度值

var $lis = $("ul.filter__dropdown li"),
  count = $lis.length;

$lis.css('width', "calc( 100% /" + count + ")");
if ((count & 1) != 0) {
  //odd
  var median = Math.round(count / 2);
  $lis.css('width', "calc( 100% /" + count + ")");

  $lis.slice(0, median - 1).css("background-color", "black");
  $lis.eq(median - 1).css("background-color", "green");
  $lis.slice(median).css("background-color", "yellow");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="filter__dropdown">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

【讨论】：