改变css of li的中位数li前后

Question

我正在尝试制作无论数量多少都会对齐项目的导航。在 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");
        }
    })
}

Answer 1

您可以使用 :lt and :gt select 或 select 中位数之前的 li 元素和 after 一些索引，即中位数。

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>

Answer 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>

改变css of li的中位数li前后

Change css of li's before and after the median li

javascript

jquery

css

html-lists

median