Determine which div is in the middle of the div list
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, note that the div number is dynamic, depends on user input. my ultimate goal is to determine which divs are to the left and right of the "middle div", then applying the class depends on its position.
The end 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 thought to add a number identifier for each div and use the 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 processing an even number:
if there is an even number of child divs in the list, 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 work well. I added some changes to both of them to handle even numbers.
Rory McCrossan (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:
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 this may not be very neat after my changes.
In the case of an odd number of elements, you can get the middle element using Math.floor(items.length / 2) . From there, you can use prevAll() and nextAll() to add classes to the corresponding 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> Without jQuery, you can also do 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> Without jQuery:
(You did not answer how to process even numbered lists. I decided to omit the center class and divide it into two parts: before and after the middle)
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) { elementList[i].classList.add(atMid); i += 1; } while (i < elementList.length) { elementList[i].classList.add(afterMid); i += 1; } }; setMidClasses(document.querySelectorAll(".item"), "top", "mid", "bottom"); .top { background-color: green; } .mid { background-color: orange; } .bottom { background-color: yellow; } <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> Here is the version using recursion with .first () /. last ()
probably not very efficient and can be done using a loop, but I wanted to show a recursive version.
function fixthem() { var divs = $("div:not(.right):not(.left)"); // Handle evens, either 2 in the middle: if (divs.length <= 2) return; // or none in the middle if (divs.length <= 1) return; divs.first().addClass("left"); divs.last().addClass("right"); fixthem(); } fixthem(); Here the same thing without recursion and only one jquery will find at the beginning (i.e., much more efficient):
function fixthem() { var divs = $("div"); // Use 1 for 1 or none in the middle (when even), 2 for 1(odd) or 2(even) while (divs.length > 2) { divs = divs.filter(":not(.right):not(.left)"); if (divs.length <= 2) break; divs.first().addClass("left"); divs.last().addClass("right"); } } fixthem(); To add a class to the middle, run it after the / function at the end of the while loop:
$("div:not(.right):not(.left)").addClass("center") Working fiddle: https://jsfiddle.net/5huLjh5q/
Centered: https://jsfiddle.net/5huLjh5q/1/
var divs = $("div"); // Use 1 for 1 or none in the middle (when even), 2 for 1(odd) or 2(even) while (divs.length > 2) { divs = divs.filter(":not(.right):not(.left)"); if (divs.length <= 2) break; divs.first().addClass("left"); divs.last().addClass("right"); } divs.addClass("center"); div { display:inline; border:1px solid black; padding: 1em; margin-top:0.5em } .left { border:1px solid red;} .right { border:1px solid green;} .center { background: pink; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div>