javascript - 改变中位数li前后li的css

Question

我正在尝试制作无论数量多少都会对齐元素的导航。在 else 中，我试图在 median-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");
        }
    })
}

Answer 1

您可以使用 :lt和 :gt选择器选择中位数之前的 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>