Determine which div is in the middle of a div list

Question

I have a div list that looks like this:

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

I need to determine which div is in the middle of the list, please note that the div number is dynamic, depends on user's input. my final goal is to determine which divs are on the left and right side of the "middle div" then apply a class depends on its position.

The final result should look like this:

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

I was thinking to add a number identifier for each div and use median to determine the "middle div" but I'm not quite sure.

Perhaps there is a better approach for this problem using javascript, jquery or even pure css?

Update:

Additional information for handling even number:

in case the list has even number of child divs, it should divide it like this

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

in my problem, both Rory McCrossan and user3297291 works well. I added some modification to both of it for handling even numbers.

Rory McCrossan's (with 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's :

    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");

feel free to edit the code snippets as it might be not very tidy after my edits.

Answer 1

In the case of an odd number of items you can get the middle item using Math.floor(items.length / 2). From there you can use prevAll() and nextAll() to add the classes to the relevant elements:

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>

Answer 2

Without jQuery you might as well do like this;

var els = Array.from(document.querySelectorAll(".item")),
    mid = ~~(els.length/2);
els.forEach((e,i) => i < mid ? e.classList.add("left")
                             : i === mid ? e.classList.add("center")
                                         : e.classList.add("right"));

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

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>