javascript - 确定哪个 div 在 div 列表的中间

Question

我有一个如下所示的 div 列表:

<div class="item"></div>
<div class="item"></div>
<div class="item"></div> <!--the middle one-->
<div class="item"></div>
<div class="item"></div>

我需要确定哪个 div 在列表的中间，请注意 div 编号是动态的，取决于用户的输入。我的最终目标是确定哪些 div 位于“中间 div”的左侧和右侧，然后根据其位置应用一个类。

最终结果应该是这样的:

<div class="item left"></div>
<div class="item left"></div>
<div class="item center"></div> <!--the middle one-->
<div class="item right"></div>
<div class="item right"></div>

我想为每个 div 添加一个数字标识符并使​​用中位数来确定“中间 div”，但我不太确定。

也许使用 javascript、jquery 甚至纯 css 有更好的方法来解决这个问题？

更新:

处理偶数的附加信息:

如果列表有偶数个子div，应该这样划分

<div class="item left"></div>
<div class="item left"></div>
<div class="item left"></div> 
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>

在我的问题中，Rory McCrossan 和 user3297291 都运行良好。我对两者都进行了一些修改以处理偶数。

Rory McCrossan 的(使用 JQuery):

    var $items = $('.item');
    var middleIndex = Math.floor($items.length / 2);
    var hasMid = $items.length % 2;
    console.log(middleIndex);

    if(hasMid == 1){
         $items.eq(middleIndex).addClass('middle')
             .prevAll().addClass('left').end()
             .nextAll().addClass('right');
    }

    if(hasMid == 0){
         $items.eq(middleIndex).addClass('right')
             .prevAll().addClass('left').end()
             .nextAll().addClass('right');
    }

user3297291 的:

    var setMidClasses = function (elementList, beforeMid, atMid, afterMid) {
    var i = 0,
        hasMid = elementList.length % 2,
        mid = Math.floor(elementList.length / 2);

    while (i < mid) {
        elementList[i].classList.add(beforeMid);
        i += 1;
    }

    if (hasMid == 1) {
        elementList[i].classList.add(atMid);
        i += 1;
    }

    while (i < elementList.length) {
        elementList[i].classList.add(afterMid);
        i += 1;
    }

};



setMidClasses(document.querySelectorAll(".item"),
    "left", "middle", "right");

请随意编辑代码片段，因为在我编辑后它可能不是很整洁。

Answer 1

如果元素数量为奇数，您可以使用 Math.floor(items.length/2) 获取中间元素。从那里您可以使用 prevAll() 和 nextAll() 将类添加到相关元素:

var $items = $('.item');
var middleIndex = Math.floor($items.length / 2);

$items.eq(middleIndex).addClass('center')
  .prevAll().addClass('left').end()
  .nextAll().addClass('right');

.left { color: red; }
.center { color: green; }
.right { color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div> <!--the middle one-->
<div class="item">4</div>
<div class="item">5</div>